《vue教程课件》-《vue教程课件》-第6章习题参考答案_第1页
《vue教程课件》-《vue教程课件》-第6章习题参考答案_第2页
《vue教程课件》-《vue教程课件》-第6章习题参考答案_第3页
《vue教程课件》-《vue教程课件》-第6章习题参考答案_第4页
《vue教程课件》-《vue教程课件》-第6章习题参考答案_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一、1、ABCDACDD实践题<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>Document</title><!--样式--><linkrel="stylesheet"href="./css/index.css"></head><body><divclass="wrap"><divclass="play_wrap"id="player"><divclass="search_bar"><!--<imgsrc="images/player_title.png"alt=""/>--> <spanstyle="color:#fff;font-size:22px;display:inline-block;padding-left:20px">云音乐</span><!--搜索歌曲--><inputtype="text"autocomplete="off"v-model='query'@keyup.enter="searchMusic();"/></div><divclass="center_con"><!--搜索歌曲列表--><divclass='song_wrapper'ref='song_wrapper'><ulclass="song_list"><liv-for="iteminmusicList"><!--点击放歌--><ahref="javascript:;"@click='playMusic(item.id)'></a><b>{{}}</b><span><i@click="playMv(item.mvid)"v-if="item.mvid!=0"></i></span></li></ul><imgsrc="images/line.png"class="switch_btn"alt=""></div><!--歌曲信息容器--><divclass="player_con":class="{playing:isPlay}"><imgsrc="images/player_bar.png"class="play_bar"/><!--黑胶碟片--><imgsrc="images/disc.png"class="discautoRotate"/><img:src="coverUrl==''?'./images/cover.png':coverUrl"class="coverautoRotate"/></div><!--评论容器--><divclass="comment_wrapper"ref='comment_wrapper'><h5class='title'>热门留言</h5><divclass='comment_list'><dlv-for="iteminhotComments"><dt><img:src="item.user.avatarUrl"alt=""/></dt><ddclass="name">{{item.user.nickname}}</dd><ddclass="detail">{{item.content}}</dd></dl></div><imgsrc="images/line.png"class="right_line"></div></div><divclass="audio_con"><audioref='audio'@play="play"@pause="pause":src="musicUrl"controlsautoplayloopclass="myaudio"></audio></div><divclass="video_con"v-show="showVideo"><videoref='video':src="mvUrl"controls="controls"></video><divclass="mask"@click="closeMv"></div></div></div></div><!--开发环境版本，包含了有帮助的命令行警告--><scriptsrc="/npm/vue/dist/vue.js"></script><!--官网提供的axios在线地址--><scriptsrc="/axios/dist/axios.min.js"></script><scripttype="text/javascript">//设置axios的基地址axios.defaults.baseURL='';//axios.defaults.baseURL='http://localhost:3000';//实例化vuevarapp=newVue({el:"#player",data:{//搜索关键字query:'',//歌曲列表musicList:[],//歌曲urlmusicUrl:'',//是否正在播放isPlay:false,//歌曲热门评论hotComments:[],//歌曲封面地址coverUrl:'',//显示视频播放showVideo:false,//mv地址mvUrl:''},//方法methods:{//搜索歌曲searchMusic(){if(this.query==0){return}axios.get('/search?keywords='+this.query).then(response=>{//保存内容this.musicList=response.data.result.songs;})//清空搜索this.query=''},//播放歌曲playMusic(musicId){//获取歌曲urlaxios.get('/song/url?id='+musicId).then(response=>{//保存歌曲url地址this.musicUrl=response.data.data[0].url})//获取歌曲热门评论axios.get('/comment/hot?type=0&id='+musicId).then(response=>{//console.log(response)//保存热门评论this.hotComments=response.data.hotComments})//获取歌曲封面axios.get('/song/detail?ids='+musicId).then(response=>{//console.log(response)//设置封面this.coverUrl=response.data.songs[0].al.picUrl})},//audio的play事件play(){this.isPlay=true//清空mv的信息this.mvUrl=''},//audio的pause事件pause(){this.isPlay=false},//播放mvplayMv(vid){if(vid){this.showVideo=true;//获取mv信息axios.get('/mv/url?id='+vid).then(response=>{//console.log(response)//暂停歌曲播放this.$refs.audio.pause()//获取mv地址this.mvUrl=response.data.data.url})}},//关闭mv界面closeMv(){this.showVi

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论