当前位置：首页 > VUE

vue实现选中状态

2026-01-18 07:34:59VUE

实现选中状态的基本方法

在Vue中实现选中状态可以通过v-model绑定数据，结合v-bind:class或v-bind:style动态切换样式。以下是一个基础示例：

<template>
  <div 
    @click="isSelected = !isSelected"
    :class="{ 'selected': isSelected }"
  >
    点击切换选中状态
  </div>
</template>

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

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

列表项选中控制

对于列表中的多个选项，通常需要管理当前选中项。可以使用索引或唯一标识符：

vue实现选中状态

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

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

使用计算属性管理状态

当选中逻辑较复杂时，可以使用计算属性：

<template>
  <button 
    v-for="color in colors"
    @click="selectColor(color)"
    :class="{ 'selected': isSelected(color) }">
    {{ color }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      colors: ['red', 'green', 'blue'],
      selectedColor: null
    }
  },
  methods: {
    selectColor(color) {
      this.selectedColor = color
    },
    isSelected(color) {
      return this.selectedColor === color
    }
  }
}
</script>

多选场景实现

需要支持多选时，可以使用数组存储选中状态：

vue实现选中状态

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(id) {
      const index = this.selectedItems.indexOf(id)
      if (index > -1) {
        this.selectedItems.splice(index, 1)
      } else {
        this.selectedItems.push(id)
      }
    }
  }
}
</script>

使用Vuex管理全局选中状态

在大型应用中，可以通过Vuex集中管理选中状态：

// store.js
export default new Vuex.Store({
  state: {
    selectedItems: []
  },
  mutations: {
    TOGGLE_SELECT(state, itemId) {
      const index = state.selectedItems.indexOf(itemId)
      if (index > -1) {
        state.selectedItems.splice(index, 1)
      } else {
        state.selectedItems.push(itemId)
      }
    }
  }
})

组件中使用：

<template>
  <div @click="$store.commit('TOGGLE_SELECT', itemId)"
       :class="{ 'selected': $store.state.selectedItems.includes(itemId) }">
    {{ itemName }}
  </div>
</template>