【利用Vue編寫圖片輪播】
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> *{ margin: 0; } .imgs{ width: 800px; height: 400px; margin: 0 auto; margin-top: 100px; } .imgs img{ width: 800px; height: 400px; } </style> </head> <body> <div id="app"> <div class="imgs" v-for="(item,index) in imgList" v-if="index==num"> <img :src="item.img" /> </div> <div class="btn"> <button @click="prev">上一張</button> <button @click="next">下一張</button> </div> </div> <script> new Vue({ el:"#app", data:{ imgList:[ {img:"img/10.jpg"}, {img:"img/11.jpg"}, {img:"img/12.jpg"}, {img:"img/13.jpg"}, ], num:0 }, methods:{ // 下一張 next:function(){ this.num++ if(this.num>this.imgList.length-1){ this.num=0 } }, // 上一張 prev:function(){ this.num-- if(this.num<0){ this.num=this.imgList.length-1 } } } }) </script> </body> </html>
效果是圖片進行上一張下一張輪播切換！