vue实现tab切换功能

vue实现tab切换功能 最近用vue做一个页面的tab功能，经过一查找资料，没用路由，也没用动态组件，完美实现了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;       //非本人组件显示

          }

       }

   }

})