vue如何实现点击高亮

Vue 实现点击高亮的方法

在 Vue 中实现点击高亮效果可以通过以下几种方式实现，具体取决于需求复杂度。

使用 v-bind:class 动态绑定类名

通过动态绑定类名，根据点击状态切换高亮样式。

<template>
  <div 
    @click="toggleHighlight"
    :class="{ 'highlight': isHighlighted }"
  >
    点击我高亮
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false
    }
  },
  methods: {
    toggleHighlight() {
      this.isHighlighted = !this.isHighlighted
    }
  }
}
</script>

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

使用 v-bind:style 动态绑定内联样式

直接通过内联样式控制高亮效果。

<template>
  <div 
    @click="toggleHighlight"
    :style="{ backgroundColor: highlightColor }"
  >
    点击我高亮
  </div>
</template>

<script>
export default {
  data() {
    return {
      highlightColor: 'transparent'
    }
  },
  methods: {
    toggleHighlight() {
      this.highlightColor = this.highlightColor === 'transparent' ? 'yellow' : 'transparent'
    }
  }
}
</script>

列表项点击高亮实现

对于列表中的项目，需要跟踪当前选中项实现高亮。

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

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3'],
      selectedIndex: null
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    }
  }
}
</script>

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

使用 Vuex 管理高亮状态

在大型应用中，可以使用 Vuex 集中管理高亮状态。

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

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

使用自定义指令实现高亮

创建自定义指令封装高亮逻辑。

// main.js
Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.addEventListener('click', () => {
      el.classList.toggle('highlight', binding.value)
    })
  }
})

<template>
  <div v-highlight="isActive">点击高亮</div>
</template>

每种方法适用于不同场景，简单交互可使用类名或样式绑定，复杂状态管理建议使用 Vuex，复用逻辑可考虑自定义指令。