vue实现选项卡功能
template代码<ulclass="swiper-wrapper" id="wrapper"style="transition-duration: 0ms;"><li class="swiper-slide swiper-slide-active" :class="{active: activea...
·
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;
}
更多推荐
已为社区贡献4条内容
所有评论(0)