vue实现选项卡切换功能

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

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

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

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

使用了stylus的样式

.current
color red
.current::before
content: ''
background-color #e02e24
width 4px
height 30px
position absolute
left 0

关键代码：
选项卡标题： :class="{current: currenta== i}"
选项卡内容： v-show=“index==currenta”
选项卡标题的点击事件

onclick(id){
this.currenta= id;
}