简单的音乐盒子
利用计算属性(监听数据)，解决上一首，下一首，点击切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, /* 清除浮动*/ q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } li{ border: 2px solid deepskyblue; padding: 5px; } </style> </head> <body> <!-- autoplay 自动播放 调整音量 自动循环 @ended 自动下一首 --> <div id="music"> <!-- :scr 要链接下面的数据 要通过指令系统--> <audio :src="currentSong" autoplay controls autoloop @ended = 'nextSong()'></audio> <ul> <!-- 点击换歌 --> <li v-for = '(item, i) in songs' @click = "currentHandler(i)"> <h3>作者:{{item.author}}</h3> <p>{{item.name}}</p> </li> </ul> <button @click = 'upSong'>上一首</button> <!-- 方法名，不加参数可以不写() --> <button @click = 'nextSong'>下一首</button> <button @click = 'addSong'>添加</button> <!-- @click 方法--> </div> <!--MVVM Model==》数组 数据库 View == document 标签 上面的div VM--> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> // 数据的双向绑定 m<=>v var songs = [ {id:1,src:'./audios/audios/1.mp3',name:"水瓶座",author:'陈晓东'}, {id:2,src:'./audios/audios/2.mp3',name:"倾城",author:'陈奕迅'}, {id:3,src:'./audios/audios/3.mp3',name:"海阔天空",author:'Beyond'}, {id:4,src:'./audios/audios/4.mp3',name:"我很快乐",author:'刘惜君'} ]; var music = new Vue({ el:'#music', data:{ // 数据属性Model songs : songs, // currentSong : "./audios/audios/1.mp3", index:0 }, methods:{ // 事件名方法要在这里声明 currentHandler(i){ // 点击歌名换歌 this.index = i; // 这里绑定了数据属性，一改就调动下面的计算属性 // this.currentSong = this.songs[i].src; }, nextSong(){ this.index++; // this.currentSong = this.songs[this.index].src; }, upSong(){ this.index = this.index-1; // this.currentSong = this.songs[this.index].src; }, addSong(){ this.songs.push( {id:5,src:'./audios/audios/4.mp3',name:"我很快乐",author:'刘惜君'}) } }, computed:{ // 计算属性，实行监听 currentSong(){ return this.songs[this.index].src } } }) </script> </body> </html>