vue实现点击选中

Vue 实现点击选中效果

使用 v-bind 和 v-on 实现基础选中

通过 v-bind:class 动态绑定样式类，结合 v-on:click 切换选中状态。在数据中定义 selected 变量控制选中状态：

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

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

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

列表项单选选中

对于列表场景，通过维护一个 selectedId 实现单选效果：

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

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

列表项多选选中

使用数组存储多个选中项，通过 includes 方法判断是否选中：

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

<script>
export default {
  data() {
    return {
      selectedIds: [],
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ]
    }
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedIds.indexOf(id)
      index === -1 
        ? this.selectedIds.push(id) 
        : this.selectedIds.splice(index, 1)
    }
  }
}
</script>

使用计算属性优化

对于复杂选中逻辑，可以使用计算属性：

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

<script>
export default {
  computed: {
    getItemClass() {
      return (id) => ({
        'active': this.selectedIds.includes(id),
        'disabled': this.disabledIds.includes(id)
      })
    }
  }
}
</script>

结合 Vuex 管理状态

当选中状态需要跨组件共享时，使用 Vuex 存储选中状态：

// store.js
export default new Vuex.Store({
  state: {
    selectedItems: []
  },
  mutations: {
    TOGGLE_SELECTION(state, id) {
      const index = state.selectedItems.indexOf(id)
      index === -1 
        ? state.selectedItems.push(id) 
        : state.selectedItems.splice(index, 1)
    }
  }
})

<template>
  <div @click="$store.commit('TOGGLE_SELECTION', item.id)">
    {{ item.name }}
  </div>
</template>

这些方法覆盖了从基础到进阶的点击选中实现方案，可根据具体场景选择合适的方式。