<div class="banner" id="app">
<ul class="img-list">
<!--<li><a href=""><img src="img/banner1.jpg"/></a></li>
<li><a href=""><img src="img/banner2.jpg"/></a></li>
<li><a href=""><img src="img/banner3.jpg"/></a></li>-->
<li><a href=""><img :src="dataList[currentIndex]"/></a></li>
</ul>
<ul class="points">
<li v-for="(item,index) in dataList" :class="{'active':currentIndex==index}"></li>
<!--<li></li>
<li></li>-->
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
dataList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"],
currentIndex:0,
timer:null
},
methods:{
autoPlay(){
_this=this;
timer=setInterval(function(){
//console.log(_this.currentIndex)
if(_this.currentIndex==2){
_this.currentIndex=0;
}else{
_this.currentIndex++;
}
},2000);
}
},
created(){
this.autoPlay();
}
});
</script>