当前位置：首页 > VUE

vue实现点选效果

2026-03-08 20:07:56VUE

Vue 实现点选效果的方法

使用 `v-bind:class` 动态绑定样式

通过 v-bind:class 绑定一个对象，根据点击状态切换样式类。例如，点击时添加高亮类：

<template>
  <div 
    :class="{ 'highlight': isSelected }" 
    @click="isSelected = !isSelected"
  >
    点击我
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false
    };
  }
};
</script>

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

使用 `v-model` 绑定单选/多选

对于单选或多选场景，可以用 v-model 绑定到数组或单个值：

vue实现点选效果

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'selected': selectedItem === item.id }"
      @click="selectedItem = item.id"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItem: null
    };
  }
};
</script>

使用事件修饰符优化交互

通过事件修饰符（如 .stop 或 .prevent）控制事件冒泡或默认行为：

vue实现点选效果

<div @click.stop="handleClick">点击我（阻止冒泡）</div>

列表项点选与状态管理

在列表中实现点选效果时，结合 v-for 和状态管理：

<template>
  <ul>
    <li 
      v-for="(item, index) in list" 
      :key="index"
      :class="{ 'active': activeIndex === index }"
      @click="activeIndex = index"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['苹果', '香蕉', '橙子'],
      activeIndex: -1
    };
  }
};
</script>

使用计算属性简化逻辑

若点选逻辑复杂，可通过计算属性派生状态：

<template>
  <div @click="toggleSelection">
    {{ displayText }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false
    };
  },
  computed: {
    displayText() {
      return this.isSelected ? '已选中' : '未选中';
    }
  },
  methods: {
    toggleSelection() {
      this.isSelected = !this.isSelected;
    }
  }
};
</script>