vue tab切换高亮类名思路

admin2024-02-23 16:55:07

在vue中要实现vue tab点击切换高亮

首先:

核心实现思路:

1. 记录当前点击激活项index

2. 通过动态控制class类名 :class = "{active: index === currentIndex}"

效果类似:

vue tab切换高亮类名思路 1

<template>
  <div
    v-for="(item,index) in List"
    :key="item.Id"
    class="role-item"
    :class="{active: index === activeIndex}"
    <!-- active在data中记录当前index,通过下面的click将当前的index值,传递下去 -->
    @click="swichTab(index)"
  >
    <div class="info">
      <svg-icon :icon-class="index === activeIndex ? 'user-active' : 'user'" class="icon" />
      {{ item.Name }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'Role',
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    swichTab(idx) {
      this.activeIndex = idx
    }
  }
}
</script>