vue多选按钮

你可以使用 Vue.js 的 v-model 指令来实现多选按钮，具体步骤如下：

1. 在 Vue 实例中定义一个数组，用来存储用户选择的选项。

data() {
  return {
    selectedOptions: []
  }
}

2. 在模板中使用 v-for 指令来渲染多选按钮组件。

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

3. 在选项的 value 中存储选项的值，当用户选择一个选项时，将其值添加到 selectedOptions 数组中。如果用户取消选择该选项，则从数组中删除该值。

data() {
  return {
    options: [
      { id: 1, label: 'Option 1', value: 'option1' },
      { id: 2, label: 'Option 2', value: 'option2' },
      { id: 3, label: 'Option 3', value: 'option3' },
    ],
    selectedOptions: []
  }
}

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

当用户选择了一个或多个选项后，selectedOptions 数组将包含这些选项的值。你可以在 Vue 实例中使用 selectedOptions 数组来处理用户的选择。