vue 实现点击选中

实现点击选中效果的方法

在Vue中实现点击选中效果可以通过多种方式完成，以下是几种常见的实现方法：

使用v-bind和v-on绑定class和事件

通过动态绑定class和监听点击事件来实现选中效果：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    }
  }
}
</script>

<style>
.selected {
  background-color: #eee;
  border: 1px solid #ccc;
}
</style>

使用计算属性管理选中状态

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

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedIds: []
    }
  },
  methods: {
    toggleSelect(id) {
      const index = this.selectedIds.indexOf(id)
      if (index === -1) {
        this.selectedIds.push(id)
      } else {
        this.selectedIds.splice(index, 1)
      }
    }
  },
  computed: {
    isSelected() {
      return (id) => {
        return { selected: this.selectedIds.includes(id) }
      }
    }
  }
}
</script>

使用Vuex管理全局选中状态

对于跨组件共享的选中状态，可以使用Vuex：

// store.js
export default new Vuex.Store({
  state: {
    selectedItem: null
  },
  mutations: {
    setSelectedItem(state, item) {
      state.selectedItem = item
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div 
    v-for="item in items" 
    :key="item.id"
    @click="$store.commit('setSelectedItem', item)"
    :class="{ 'selected': $store.state.selectedItem === item }"
  >
    {{ item.name }}
  </div>
</template>

实现单选/多选切换

通过参数控制单选或多选模式：

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

<script>
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: []
    }
  },
  methods: {
    handleSelect(item) {
      if (this.multiple) {
        const index = this.selectedItems.findIndex(i => i.id === item.id)
        if (index === -1) {
          this.selectedItems.push(item)
        } else {
          this.selectedItems.splice(index, 1)
        }
      } else {
        this.selectedItems = [item]
      }
    },
    getSelectedClass(item) {
      return {
        selected: this.selectedItems.some(selected => selected.id === item.id)
      }
    }
  }
}
</script>

这些方法可以根据具体需求进行调整，实现从简单到复杂的点击选中效果。