在许多项目中，最常见的莫过于tab栏切换高亮以及根据tab栏切换渲染数据，这时候就有刚入门的小伙伴问了，如何不用快捷组件快速简单的实现tab栏高亮呢？非常简单，我们只需要通过index就可以实现了！
1、首先，我们在data中定义一个activeIndex
data() {
return {
activeIndex:0
};
},
activeIndex当做下标使用，这里赋值为0默认第一个，可以赋值为-1（-1的话在页面渲染是不会被显示的）
2、然后，给我们的tab栏添加点击事件，需要传它真正的下标index（即我们点的哪一个）
注：这里为了实现效果，提前定义的数据并渲染出效果
//渲染数据
- {{item}}
data() {
return {
activeIndex:0,
//自定义数据
arr:['苹果','梨','橘子','火龙果','猕猴桃']
};
},
然后添加点击并传递index（下标）事件
//标签添加点击事件并传index
-
@click="activeHandle(index)">{{item}}
//js中methods写事件名获取点击的当前下标
3、css中写需要的高亮样式，通过三元表达式判断activeIndex和index是否相等，如果相等的话添加这个class，否则不添加
例：点击当前tab栏某一项，字体为红色，添加下划线
.active{
color: red;
border-bottom: 1px solid #000;
}
tab栏li标签通过三元表达式去判断添加class类名（当然 不一定是li标签）
-
:class="activeIndex==index?'active':''">{{item}}
这样就实现简单的tab栏切换高亮了，对于根据tab栏切换、对应的数据跟随变动 咱们这种自定义简单的小数组是实现不了的，同理通过activeIndex找到tab数据中的那一条并通过filter过滤匹配下方列表渲染的对应数据就可以实现了，改天我拿个数据再来详细步骤