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