当前位置：首页 > VUE

vue实现当前元素高亮

2026-01-22 15:57:07VUE

Vue 实现当前元素高亮的方法

使用动态 class 绑定

通过 v-bind:class 或简写 :class 动态切换高亮样式。定义一个变量存储当前高亮元素的索引或唯一标识，点击时更新该变量。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      :class="{ 'highlight': activeIndex === index }"
      @click="activeIndex = index"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      activeIndex: null
    };
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

使用计算属性

对于复杂逻辑，可通过计算属性返回高亮状态。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      :class="getHighlightClass(item.id)"
      @click="setActiveItem(item.id)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ],
      activeId: null
    };
  },
  methods: {
    setActiveItem(id) {
      this.activeId = id;
    }
  },
  computed: {
    getHighlightClass() {
      return (id) => ({ 'highlight': this.activeId === id });
    }
  }
};
</script>

使用 Vuex 管理状态

若项目使用 Vuex，可将高亮状态集中管理。

// store.js
export default new Vuex.Store({
  state: {
    activeItemId: null
  },
  mutations: {
    setActiveItem(state, id) {
      state.activeItemId = id;
    }
  }
});

组件中通过 mapState 和 mapMutations 使用：

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'highlight': activeItemId === item.id }"
      @click="setActiveItem(item.id)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['activeItemId'])
  },
  methods: {
    ...mapMutations(['setActiveItem'])
  }
};
</script>

使用路由高亮

若高亮与路由相关，可通过 router-link 的 active-class 实现。

<template>
  <div>
    <router-link 
      v-for="route in routes" 
      :key="route.path"
      :to="route.path"
      active-class="highlight"
    >
      {{ route.name }}
    </router-link>
  </div>
</template>