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