代码奉上：
<!DOCTYPE html> <html> <head> <title>阿森音乐播放器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> body{ background:#CDB7B5; } .class1{ background: green; } #song{ } #song audio{ width: 100%; height: 10px; } .simple{ text-align: center; font-size: 20px; } </style> </head> <body> <div id="main"> <div id="song"> <audio :src="getCurrentSongSrc" @ended="ended" controls autoplay></audio> </div> <div class="simple" :class=‘{class1:index==currentindex}‘ v-for="(music,index) in musicDatas" :key=‘index‘ @click="changeMucis(index)"> <h2>{{music.name}}</h2> </div> </div> <script type="text/javascript"> const musicDatas = [{‘name‘: ‘精彩最初-PiuPiuPiu（精彩最初 remix）‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=1811713141.mp3‘, ‘picUrl‘: ‘http://p3.music.126.net/fjIymPUcRjts0VpDxxdaXQ==/109951165626452991.jpg‘, ‘singer‘: ‘精彩最初‘}, {‘name‘: ‘Piu Piu Piu‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=1488780845.mp3‘, ‘picUrl‘: ‘http://p3.music.126.net/CXHqf3EqKOFwnf2mb8QvxQ==/109951165404753947.jpg‘, ‘singer‘: ‘拼音师‘}, {‘name‘: ‘9277‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=557579220.mp3‘, ‘picUrl‘: ‘http://p4.music.126.net/Bbrz5ewRRN0aRly1VTc4Aw==/109951163289835394.jpg‘, ‘singer‘: ‘周晏伊‘}, {‘name‘: ‘舔包人之歌‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=1809043899.mp3‘, ‘picUrl‘: ‘http://p3.music.126.net/a9lJ1jLEtgLoGG-95x0hjw==/109951165603405969.jpg‘, ‘singer‘: ‘张老板啊‘}, {‘name‘: ‘错位时空 (DJ版)‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=1817762859.mp3‘, ‘picUrl‘: ‘http://p3.music.126.net/8C0lwLE88j9ZwLyPQ9a4FA==/109951165595770076.jpg‘, ‘singer‘: ‘艾辰‘}, {‘name‘: ‘错位时空‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=1808492017.mp3‘, ‘picUrl‘: ‘http://p4.music.126.net/8C0lwLE88j9ZwLyPQ9a4FA==/109951165595770076.jpg‘, ‘singer‘: ‘艾辰‘}, {‘name‘: ‘机器铃 砍菜刀‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=473817665.mp3‘, ‘picUrl‘: ‘http://p3.music.126.net/uIOrdW8DnS-TM2UinIBwXQ==/18590542604337710.jpg‘, ‘singer‘: ‘ 张卫‘}, {‘name‘: ‘9420（蔡方萌&麦小兜）‘, ‘url‘: ‘http://music.163.com/song/media/outer/url?id=528348555.mp3‘, ‘picUrl‘: ‘http://p4.music.126.net/31eVBs0uMgiKQLA5lbjixw==/109951163096638649.jpg‘, ‘singer‘: ‘蔡方萌‘}] new Vue({ el:"#main", data:{ musicDatas, currentindex:0, }, methods:{ changeMucis:function(index){ this.currentindex = index }, ended:function(){ if (this.currentindex<this.musicDatas.length-1) { this.currentindex += 1 }else{ this.currentindex =0 } }, }, computed:{ getCurrentSongSrc(){ return this.musicDatas[this.currentindex].url } } }) </script> </body> </html>
原文：https://www.cnblogs.com/3-wusen/p/14471891.html
