当前位置：首页 > VUE

vue实现选中效果

2026-01-19 17:10:23VUE

实现选中效果的方法

在Vue中实现选中效果可以通过多种方式，常见的有使用v-bind:class动态绑定类名、利用v-model与表单元素结合，或通过状态管理控制选中样式。以下是几种典型实现方案：

动态类名绑定

通过v-bind:class根据条件动态切换CSS类，适用于高亮选中项的场景：

vue实现选中效果

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

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

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

单选框/复选框控制

利用v-model与表单元素结合，实现选中状态绑定：

vue实现选中效果

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        v-model="selectedOption" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' }
      ],
      selectedOption: ''
    };
  }
};
</script>

列表多选功能

通过数组存储多个选中项，适用于需要多选的场景：

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id"
      :class="{ 'selected': selectedItems.includes(item.id) }"
      @click="toggleSelection(item.id)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedItems.indexOf(id);
      if (index === -1) {
        this.selectedItems.push(id);
      } else {
        this.selectedItems.splice(index, 1);
      }
    }
  }
};
</script>

使用计算属性优化

对于复杂选中逻辑，可通过计算属性派生状态：

<template>
  <div>
    <button 
      v-for="tab in tabs"
      :key="tab"
      :class="{ 'active': isActive(tab) }"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About'],
      currentTab: 'Home'
    };
  },
  methods: {
    isActive(tab) {
      return this.currentTab === tab;
    }
  }
};
</script>