ALiXiaoNa

           最近在学习vue，就用vue写了一版自动轮播的选项卡，可能也有不足之处，大家多多交流，有要交流的可以加我扣扣哈（2601897771）。下面就分享下代码。

css代码

<style>
#box div{width: 200px; height: 200px; border: 1px solid #000; display:none;}
#box .show{display: block}
#box input{width: 50px; height: 30px; }
#box input.active{background: red;}
</style>

html代码

<div id="box" @mouseover="closeAuto()" @mouseout="startAuto()">
   <!--利用a值得变化来给按钮添加active样式， 点击的时候把index值传给vue实例-->
   <input type="button" v-for="(item,index) in anniu" :value="item" :class="{active:index==a}" @click="tab(index)" >
   <div v-for="(item,index) in data" :class="{show:index==a}" >{{item}}</div>
</div>

JavaScript代码

<script>
   window.onload=function(){
      var app=new Vue({
         el:'#box',
         data:{
            a:0,
            timer:'',
            anniu:['新闻','娱乐','体育'],
            data:['这是新闻','这是娱乐','这是体育'],
         },
         methods:{
            tab:function (n) {
               this.a=n;
            },
            auto:function (n) {
               //解决定时器this指向问题
               var _this=this;
               this.timer=setInterval(function () {
                  n++;
                  if (n > _this.anniu.length-1) {
                     n = 0
                  }
                  _this.a = n;
               },1500)
            },
            closeAuto:function () {
               clearInterval(this.timer);
            },
            startAuto:function () {
               //根据当前显示得继续往下播放
               this.auto(this.a);
            },
         }
      })
      app.auto(0);
   }
</script>