当前位置：首页 > VUE

vue点击实现多选

2026-03-29 18:59:38VUE

实现多选功能的方法

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

方法一：使用v-model和数组绑定 通过将v-model绑定到一个数组，可以实现多选功能。当用户点击复选框时，选中的值会自动添加到数组中。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="item.id" 
        :value="item.value" 
        v-model="selectedItems"
      >
      <label :for="item.id">{{ item.label }}</label>
    </div>
    <p>已选: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 'apple', label: '苹果' },
        { id: 2, value: 'banana', label: '香蕉' },
        { id: 3, value: 'orange', label: '橙子' }
      ],
      selectedItems: []
    }
  }
}
</script>

方法二：手动管理选中状态 通过维护一个数组来手动管理选中状态，适合需要更复杂逻辑的场景。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelect(item)"
      :class="{ 'selected': isSelected(item) }"
    >
      {{ item.label }}
    </div>
    <p>已选: {{ selectedItems.map(item => item.label) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 'apple', label: '苹果' },
        { id: 2, value: 'banana', label: '香蕉' },
        { id: 3, value: 'orange', label: '橙子' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.findIndex(selected => selected.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    },
    isSelected(item) {
      return this.selectedItems.some(selected => selected.id === item.id)
    }
  }
}
</script>

<style>
.selected {
  background-color: #eee;
}
</style>

方法三：使用计算属性 结合计算属性可以更方便地处理选中状态和派生数据。

vue点击实现多选

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :checked="isChecked(item.id)"
        @change="handleChange(item)"
      >
      <label>{{ item.label }}</label>
    </div>
    <p>已选: {{ selectedLabels }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 'apple', label: '苹果' },
        { id: 2, value: 'banana', label: '香蕉' },
        { id: 3, value: 'orange', label: '橙子' }
      ],
      selectedIds: []
    }
  },
  computed: {
    selectedLabels() {
      return this.items
        .filter(item => this.selectedIds.includes(item.id))
        .map(item => item.label)
    }
  },
  methods: {
    isChecked(id) {
      return this.selectedIds.includes(id)
    },
    handleChange(item) {
      const index = this.selectedIds.indexOf(item.id)
      if (index === -1) {
        this.selectedIds.push(item.id)
      } else {
        this.selectedIds.splice(index, 1)
      }
    }
  }
}
</script>