第一種：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="okk">
<audio :src="currentSong" autoplay="" controls="" @ended="nextsong()"> </audio>
<ul>
<li v-for="(item,index) in songs" @click="clickHandle(index)">
<h3>歌手:{{item.name}}====
歌名:{{item.title}}</h3>
</li>
</ul>
</div>
<script>
var songs=[
{id:1,name:'楊爍 ',title:'走在鄉間的小路上',src:'./audio/走在鄉間的小路上.mp3'},
{id:2,name:'楊麗',title:'笑看風雲',src:'./audio/笑看風雲.mp3'},
{id:3,name:'金南玲',title:'逆流成河',src:'./audio/逆流成河.mp3'},
{id:4,name:'齊秦',title:'狼',src:'./audio/狼.mp3'}
]
new Vue({
el:'#okk',
data:{
songs:songs,
currentSong:'./audio/走在鄉間的小路上.mp3',
currentIndex:0,
},
methods:{
clickHandle:function (index) {
console.log(this);
// console.log(this.songs[index])
this.currentSong = this.songs[index].src;
this.currentIndex = index; //參數為index時
// this.currentSong = item.src; //參數為item時
},
nextsong:function () {
// alert(111);
// alert(this.currentIndex);
console.log(this.songs.length);
console.log(this.currentIndex);
if(this.currentIndex==this.songs.length-1){
this.currentIndex=-1;
}
this.currentIndex++;
console.log(this.currentIndex);
this.currentSong = this.songs[this.currentIndex].src;
}
}
})
</script>
</body>
</html>
第二種：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="okk">
<audio :src="currentSrc" autoplay="" controls="" @ended="nextsong()"> </audio>
<ul>
<li v-for="(item,index) in songs" @click="clickHandle(index)">
<h3>歌手:{{item.name}}====
歌名:{{item.title}}</h3>
</li>
</ul>
</div>
<script>
var songs=[
{id:1,name:'楊爍 ',title:'走在鄉間的小路上',src:'./audio/走在鄉間的小路上.mp3'},
{id:2,name:'楊麗',title:'笑看風雲',src:'./audio/笑看風雲.mp3'},
{id:3,name:'金南玲',title:'逆流成河',src:'./audio/逆流成河.mp3'},
{id:4,name:'齊秦',title:'狼',src:'./audio/狼.mp3'}
]
new Vue({
el:'#okk',
data:{
songs:songs,
currentIndex:0,
},
methods:{
clickHandle:function (index) {
console.log(this);
// console.log(this.songs[index])
this.currentIndex=index; //參數為index時
// this.currentSong = item.src; //參數為item時
},
nextsong:function () {
// alert(111);
// alert(this.currentIndex);
console.log(this.songs.length);
console.log(this.currentIndex);
if(this.currentIndex==this.songs.length-1){
this.currentIndex=-1;
}
this.currentIndex++;
console.log(this.currentIndex);
// this.currentSong = this.songs[this.currentIndex].src;
}
},
computed:{
// 計算數據屬性，就是data里面的數據
currentSrc(){
return this.songs[this.currentIndex].src;
}
},
created(){
}
})
</script>
</body>
</html>
