vue实现tab切换功能

时间:2023-03-08 16:58:34
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下
vue实现tab切换功能

下面是代码实现,这是模板

<article id="example" class="wrap">
<div class="tab_area">
<ul class="tab_tit">
<li v-for="(tab,index) in tabs" :class="{tab_tit_cur:curtab==index}" @click="toggletab(index)" v-html="tab.title"></li>
</ul>
</div>
<Owncard v-show="isShowOwnCards" :owncards="owncards"></Owncard>
<Noowncard v-show="!isShowOwnCards" :no-owncards="noOwncards"></Noowncard>
<Addcard v-show="isShowOwnCards"></Addcard>
</article>
这是根组件的js实现,由于只讲tab实现,子组件的代码就不贴出来了
var vm=new Vue({
el: '#example',
data: {
     tabs:[{id:0,title:"本人",iscurTab:true},{id:1,title:"非本人",iscurTab:false}], //tab项
curtab:0, //当前被选择tab标识,用来渲染tab选中样式
isShowOwnCards:true //用来渲染tab对应的内容块
},
  components:{
    Owncard:owncard, //本人tab展示模块
    Noowncard:noOwncard, //非本人tab展示模块
    Addcard: addcard, //只在本人模块下显示的添加按钮
  },
  methods:{
toggletab: function(index){
this.curtab=index; //将选中的tab的index赋给curtab,基于vue双向绑定,tab的样式会改变
if(index==0){ //用来设置相应内容块是否显示标识
this.isShowOwnCards=true; //本人组件显示
}else{
this.isShowOwnCards=false; //非本人组件显示
}
}
}
})