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
然后利用下标进行显示隐藏