ejs項目遷到vue-bootstrap之tab切換

bootstrap內部的tab切換，在ejs裏不知道怎麼配置，遷到vue項目就都亂套了，基本的切換效果有，但是順序亂了，所以自己寫了一個切換功能
首先爲每一個標題註冊一個點擊事件，並且傳入下表

@click="nanTab(1)"
@click="nanTab(2)"
@click="nanTab(3)"
@click="nanTab(4)"

在組件數據裏，初始化index

data () {
return {
index: 1
}

在方法中，將事件傳入的值，賦值給index

methods: {
nanTab (i) {
this.index = i
}
}

每點擊一個標題，index都是對應的這個標題
現在根據index，來判斷，選中的是否是激活的類名

:class='this.index === 1 ? active : col-xs-3'

在內容區域控制顯示和隱藏

v-show="this.index === 1"

總結

爲事件傳入參數，每出發一個事件，就將當前事件的參數，傳遞給一個變量，用來表示當前的下標
根據下標類進行屬性綁定，看當前是否是激活的class
然後利用下標進行顯示隱藏