vue实现点击高亮

实现点击高亮的方法

在Vue中实现点击高亮效果，可以通过动态绑定CSS类或内联样式来实现。以下是几种常见的方法：

动态绑定类名

通过v-bind:class或简写:class动态切换类名，结合CSS定义高亮样式。

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

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

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

使用内联样式

通过v-bind:style动态绑定样式对象，直接修改元素的样式属性。

<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    :style="{ backgroundColor: item.id === selectedId ? 'yellow' : '' }"
    @click="selectedId = item.id"
  >
    {{ item.text }}
  </div>
</template>

使用计算属性

对于更复杂的高亮逻辑，可以使用计算属性动态生成类名或样式对象。

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

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

使用事件修饰符

结合Vue的事件修饰符，可以更灵活地控制高亮行为。

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

使用Vuex管理状态

在大型应用中，可以使用Vuex管理高亮状态，实现跨组件的高亮效果。

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

以上方法可以根据具体需求选择适合的方式实现点击高亮效果。