在jQuery中，若想實現Tab頁面的跳轉，只需要將相應的class名，一般為active，加到對應的dom元素上，使其顯示即可。

那麼，如果我們選擇使用vue.js，該如何實現Tab頁的跳轉呢？

思路與jQuery類似，即點選對應的Tab項時，使對應的class有效。因此，

(1)要具備動態的class,如，:class="{active:index==x}"

(2)要繫結點選事件及對應的函式，如，@click=activateTab(x)

(3)當然你使用了變數index,自然要在vue例項中宣告此變數。

Tab標籤：

<ul class="tab-header clear-float-ml">
            <li class="name" @click="activateTab(0)" :class="{active:index==0}">New</li>
            <li class="name" @click="activateTab(1)" :class="{active:index==1}">Existed&Copy</li>
 

</ul>  

Tab標籤對應的展示的內容：

 <form class="tab-content new-tab" :class="{active:index==0}">
         
 </form>
 <div class="tab-content existed-tab active" :class="{active:index==1}">
           
 </div>

vue例項中對應的資料以及函式：

<!-- vue 例項-->
    var vm=new Vue({
      el:'#management',
      data:{
        index:0
      },
      methods:{
        activateTab:function(index_chosen){
          this.index=index_chosen;
        }
      }

    })