Vue-簡單輪播圖
阿新 • • 發佈：2018-12-08
Vue-簡單輪播圖
vue寫的一個簡單輪播圖
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> body{ margin: 0; } .swiper-item{ position: absolute; transition: all 2s; opacity: 0; } .swiper-item img{ width: 100%; } .show{ opacity: 1; } </style> </head> <body> <!-- view --> <div id="app"> <div class="swiper"> <div v-for="(item,index) in list" class="swiper-item" :class="{'show':index==currentIndex}"> <img :src="item.img" alt=""> </div> </div> </div> <script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //model var data = { currentIndex:0, list:[ { id:1, img:"img/1.jpg" },{ id:2, img:"img/2.jpg" },{ id:3, img:"img/3.jpg" },{ id:4, img:"img/4.jpg" }, ] } //viewModel var app = new Vue({ el:"#app", data:data, methods:{ dealClick(index){ this.index = index } }, created(){ var self = this setInterval(function () { self.currentIndex++ if(self.currentIndex>=self.list.length){ self.currentIndex = 0 } },4000) } }) </script> </body> </html>