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;       //非本人组件显示
          }
       }
   }
})