Vue实现简单的轮播效果，用的的一些常用系统指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../static/vue.js"></script>
<title>Title</title>
<style> .turn{ width: 600px; margin:0 auto;
} ul{ width: 300px; margin: 0 auto; overflow: hidden; list-style: none;
} ul li{ float: left; width: 30px; height: 30px; background-color: hotpink; margin-left: 10px; line-height: 30px; text-align: center; color: white;
}
</style>
</head>
<body>
<div id="app" class="turn">
<img :src="currentSrc" @mouseenter="closeTime" @mouseleave="openTime">
<ul>
<a><li v-for = "(item,i) in imgArr" @click="currentChange(item)" >{{ i+1 }}</li></a>
</ul>
<button @click="lastImg">上一张</button>
<button @click="nextImg">下一张</button>
</div>
<script> let adc =new Vue({ el:"#app", data:{ currentSrc:"../static/picture/1.png", imgArr:[ {id:1,src:"../static/picture/1.png"}, {id:2,src:"../static/picture/2.jpg"}, {id:3,src:"../static/picture/3.jpeg"}, {id:4,src:"../static/picture/4.jpg"}, {id:5,src:"../static/picture/5.jpg"}, {id:6,src:"../static/picture/6.jpg"}, ], imgIndex:0, timer:null, }, created(){ this.timer= setInterval(this.nextImg,2000) }, computed:{ reverseStr:{ set:function (newValue) { }, get:function () { } } }, methods:{ currentChange(item){ this.currentSrc=item.src; }, lastImg(){ if(this.imgIndex==0){ this.imgIndex=this.imgArr.length } this.imgIndex--; this.currentSrc=this.imgArr[this.imgIndex].src }, nextImg(){ if(this.imgIndex==this.imgArr.length-1){ this.imgIndex=-1 } this.imgIndex++; this.currentSrc=this.imgArr[this.imgIndex].src }, closeTime(){ clearInterval(this.timer); }, openTime(){ this.timer=setInterval(this.nextImg,2000); } } }) </script>
</body>
</html>
简单的音乐播放列表：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <script src="../static/vue.js"></script>
7 <title>Title</title>
8 <style>
9 ul{
10 list-style: none;
11 }
12 li{
13 border-bottom: 1px solid gray;
14 }
15 </style>
16 </head>
17 <body>
18
19 <div id="mplay">
20 <audio :src="currSong" autoplay="" controls="" @ended="nextSong"></audio>
21 <ul>
22 <li v-for="(item,index) in songs">
23 <button @click="play(index)">歌曲：{{ item.song }}</button>
24 <p>作者：{{ item.author }}</p>
25 </li>
26 </ul>
27 <button @click="addSong">添加歌曲</button>
28
29 </div>
30
31 <script>
32 let songList=[ 33 {song:"星月神话.mp3",author:"董敏",src:"../static/muscis/星月神话.mp3"}, 34 {song:"九张机.mp3",author:"叶清炫",src:"../static/muscis/九张机.mp3"}, 35 {song:"红颜旧.mp3",author:"刘涛",src:"../static/muscis/红颜旧.mp3"}, 36 {song:"赤血长殿.mp3",author:"王凯",src:"../static/muscis/赤血长殿.mp3"}, 37 {song:"风吹麦浪.mp3",author:"李建",src:"../static/muscis/风吹麦浪.mp3"}, 38 {song:"恋人心.mp3",author:"魏新雨",src:"../static/muscis/恋人心.mp3"}, 39
40 ]; 41 let mpc=new Vue({ 42 el:"#mplay", 43 data:{ 44 songs:songList, 45 //defaultSong:"../static/muscis/星月神话.mp3",
46 indexSong:0, 47 }, 48 methods:{ 49 play(index){ 50 this.indexSong=index 51 }, 52 nextSong(){ 53 if (indexSong==songs.length-1){ 54 this.indexSong=-1; 55 } 56 this.indexSong++; 57 //this.defaultSong=this.songs[this.indexSong].src;
58 }, 59 addSong(){ 60 this.songs.push({song:"小酒窝.mp3",author:"林俊杰",src:"../static/muscis/小酒窝.mp3"}); 61 } 62 }, 63 computed:{ 64 //生命周期时使用
65 currSong(){ 66 console.log(111); 67 return this.songs[this.indexSong].src 68 } 69 } 70
71 }) 72 </script>
73 </body>
74 </html>