代码奉上：
<!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>View Code
-----------------------------------------------------------------------------------------------------------------------------------------
