vue 实现多选

在Vue中实现多选可以使用多种方式，以下是其中一种常见的实现方式：

在data中定义一个数组selectedItems来存储选中的项：

data() {
  return {
    options: [
      { id: 1, label: '选项1' },
      { id: 2, label: '选项2' },
      { id: 3, label: '选项3' },
      { id: 4, label: '选项4' }
    ],
    selectedItems: []
  }
}

在模板中使用v-for指令遍历选项，并使用v-model指令绑定选中状态：

<div v-for="option in options" :key="option.id">
  <input type="checkbox" :id="option.id" :value="option" v-model="selectedItems">
  <label :for="option.id">{{ option.label }}</label>
</div>

在Vue实例中添加一个方法来处理选项的变化：

methods: {
  handleSelectionChange() {
    console.log(this.selectedItems);
  }
},

在模板中使用@change事件监听选项的变化，并调用handleSelectionChange方法：

<div v-for="option in options" :key="option.id">
  <input type="checkbox" :id="option.id" :value="option" v-model="selectedItems" @change="handleSelectionChange">
  <label :for="option.id">{{ option.label }}</label>
</div>

这样，当用户选中或取消选中某个选项时，selectedItems数组会自动更新，同时handleSelectionChange方法会被调用，您可以在该方法中处理选项的变化。