1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>音乐播放器</title> 6 <style> 7 *{ 8 margin-left: 0px; 9 padding-left: 0px; 10 } 11 ul li{ 12 list-style: none; 13 line-height: 30px; 14 color:#999999; 15 } 16 ul li.active{ 17 background-color: indianred; 18 color: #FFFFFF; 19 } 20 audio{ 21 width: 100%; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="music"> 27 <!--@ended事件，当媒体播放完成 会自动调用该方法，执行该脚本，自动播放下一首--> 28 <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio> 29 <ul> 30 <!-- 循环歌名，展示 --> 31 <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'> 32 {{item.id}}.{{ item.author }}-{{ item.name }} 33 </li> 34 </ul> 35 </div> 36 <script src="js/vue.js"></script> 37 <script> 38 var musicData = [ 39 { 40 id: 1, 41 name: '遇见', 42 author: '孙燕姿', 43 songSrc: 'static/孙燕姿 - 遇见.mp3' 44 }, 45 { 46 id: 2, 47 name: '斑马，斑马', 48 author: '宋冬野', 49 songSrc: 'static/宋冬野 - 斑马，斑马.mp3' 50 }, 51 { 52 id: 3, 53 name: '夜空中最亮的星', 54 author: '逃跑计划', 55 songSrc: 'static/逃跑计划 - 夜空中最亮的星.mp3' 56 }, 57 { 58 id: 4, 59 name: '匆匆那年', 60 author: '王菲', 61 songSrc: 'static/王菲 - 匆匆那年.mp3' 62 } 63 ]; 64 new Vue({ 65 el: '#music', 66 data() { 67 return { 68 musicData:[], 69 currentIndex:0 70 } 71 }, 72 methods:{ 73 //点击那首歌播放哪一首 74 songHandler(i){ 75 this.currentIndex = i; 76 }, 77 //播放下一首 78 nextHanlder(){ 79 this.currentIndex++; 80 } 81 }, 82 created(){ 83 //赋值变量 84 this.musicData = musicData 85 } 86 }) 87 </script> 88 </body> 89 </html>