当前位置：首页 > VUE

vue实现点击高亮效果

2026-01-20 07:48:31VUE

实现点击高亮效果的方法

在Vue中实现点击高亮效果可以通过多种方式完成，以下是几种常见的方法：

方法一：使用动态class绑定

通过v-bind:class或简写:class动态切换高亮样式类。

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

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

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

方法二：使用内联样式绑定

通过v-bind:style或简写:style动态修改元素样式。

<template>
  <div 
    v-for="(item, index) in items" 
    :key="index"
    @click="selectedIndex = index"
    :style="{ backgroundColor: selectedIndex === index ? 'yellow' : 'transparent' }"
  >
    {{ item }}
  </div>
</template>

方法三：使用计算属性

对于更复杂的高亮逻辑，可以使用计算属性。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      highlightedIndexes: []
    }
  },
  methods: {
    toggleHighlight(index) {
      const i = this.highlightedIndexes.indexOf(index)
      if (i > -1) {
        this.highlightedIndexes.splice(i, 1)
      } else {
        this.highlightedIndexes.push(index)
      }
    }
  },
  computed: {
    getHighlightClass() {
      return (index) => ({
        'highlight': this.highlightedIndexes.includes(index)
      })
    }
  }
}
</script>

方法四：使用Vuex管理状态

当需要在多个组件间共享高亮状态时，可以使用Vuex。

// store.js
export default new Vuex.Store({
  state: {
    highlightedItem: null
  },
  mutations: {
    setHighlightedItem(state, item) {
      state.highlightedItem = item
    }
  }
})

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    @click="$store.commit('setHighlightedItem', item)"
    :class="{ 'highlight': $store.state.highlightedItem === item }"
  >
    {{ item.name }}
  </div>
</template>