l: function () {
this.interval = setInterval(() => {
this.currentIndex = this.currentIndex + 1;
if (this.currentIndex === this.imageArray.length) {
this.currentIndex = 0;
}
}, 3000)
},
changePic: function (index) {
this.currentIndex = index;
}
},
created(){
this.setInterVal();
}
})
</script>
</body>
</html>
四、案例：音乐播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Vue实现音乐播放器</title>
<script src="../statics/vue.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<audio :src="songs[currentIndex].songSrc" controls="controls" loop="loop" autoplay="autoplay"></audio>
<ul>
<li v-for="song in songs" :key="song.id" @click="playSong(song.id)" :class="{ active: song.id===currentIndex+1 }">
<h2>歌手：{{ song.artist }}</h2>
<p>歌名：{{ song.name }}</p>
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
songs: [
{ id: 1, songSrc: '../medias/不再让你孤单.mp3', artist: "李必胜", name: '不再让你孤单' },
{ id: 2, songSrc: '../medias/漂洋过海来看你.mp3', artist: "Pizza Li", name: '漂洋过海来看你' },
{ id: 3, songSrc: '../medias/成都.mp3', artist: '必胜', name: '成都' },
{ id: 4, songSrc: '../medias/晚风.mp3', artist: 'Pizza', name: '晚风' },
],
currentIndex: 0
},
methods: {
playSong(index) {
this.currentIndex = index - 1;
}
}
})
</script>
</body>
</html>
好了，以上就是vue常用指令介绍。