vue 組件式開發tabControl

經常在頁面會使用tab切換，如下為tabcontrol組件開發 

 

//點擊的時候當前的index 傳給方法然後顏色變化
  <div class="tab-control">
    <!-- if you click the first tab ,index =0, -->
    <div v-for="(item,index) in title" @click="tabClick(index)" class="tab-control-item" :class="{active:index === currentIndex}">
      <span>{{item}}</span>
    </div>
  </div>


 methods:{
    tabClick(index){
      console.log(index)
      this.currentIndex=index
    }
  }