一、简单音乐播放器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="music"> <audio muted :src="currentSrc" autoplay="autoplay" controls="controls" @ended="nextSongs"></audio> <ul> <li v-for="(item, index) in musicArr" @click="clickHandler(item)"> <h4>歌名: {{item.name}}</h4> <p>作者：{{item.author}}</p> <hr> </li> </ul> </div> <script src="./js/vue.js"></script> <script> var songs = [ {id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"}, {id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"}, {id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"}, {id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"} ] var mu = new Vue({ el: "#music", data: { musicArr: songs, currentSrc: "./audios/1.mp3", currentIndex: 0, }, methods:{ clickHandler(item){ this.currentSrc = item.src; }, nextSongs(){ this.currentIndex += 1; this.currentSrc = this.musicArr[this.currentIndex].src; console.log(this.currentSrc) } }, computed:{}, }) </script> </body> </html>
二、轮播图
原文：https://www.cnblogs.com/wt7018/p/11506855.html