Vue简单实现tab栏切换（高亮）

最新推荐文章于 2025-10-19 09:42:10 发布

原创最新推荐文章于 2025-10-19 09:42:10 发布 · 8.8k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue.js中不使用快捷组件，通过数据绑定和事件处理实现Tab栏切换时的高亮效果。主要步骤包括：定义activeIndex作为初始选中项，给每个Tab添加点击事件并传递index，根据点击更新activeIndex，最后通过条件类绑定实现高亮样式。同时，文章提及了如何根据activeIndex动态渲染对应数据。

在许多项目中，最常见的莫过于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过滤匹配下方列表渲染的对应数据就可以实现了，改天我拿个数据再来详细步骤