vue实现选项卡功能

template代码

<ul
            class="swiper-wrapper" id="wrapper"
            style="transition-duration: 0ms;">
            <li class="swiper-slide swiper-slide-active" :class="{active: activea == i}"  v-for="(v,i) in listArr" :key="i" @click="onclick(i)">
              <span class="started-at">选项{{i}}</span>i
            </li>
          </ul>

 <div class="page" v-for="(view,index) in listArr" :key="index" v-show="index==activea">
            <div class="products">
           			放置选项卡的内容
            </div>
          </div>

script代码

export default {
  data() {
    return {
      activea:0
    };
  },

  methods: {
    onclick(id){
      this.activea = id;
    }
  }
};

关键代码：
选项卡标题： :class="{active: activea == i}"
选项卡内容： v-show=“index==activea”
选项卡标题的点击事件 onclick(id){
this.activea = id;
}