VUE 实现下拉选项多选

在 Vue 中实现下拉选项的多选可以通过以下步骤实现：

1. 创建一个包含所有选项的数组，以及一个用于存储已选选项的数组。

2. 在模板中使用 `v-model` 绑定一个选项值的数组，以便在用户进行选择时将选项添加到或从该数组中删除。

3. 为每个选项创建一个复选框，在选项被选中时更新绑定的选项值数组。

以下是一个示例代码：

<template>
  <div>
    <select multiple v-model="selectedOptions">
      <option v-for="option in options" :value="option">{{ option }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
      selectedOptions: []
    }
  }
}
</script>

在这个示例中，我们使用了 `v-model` 指令来绑定一个数组 `selectedOptions`，该数组将存储用户选择的选项。我们使用 `multiple` 属性来允许用户选择多个选项，并使用 `v-for` 指令来循环渲染所有选项。每个选项都有一个绑定到 `selectedOptions` 数组的值。

如果用户选中了一个选项，该选项的值将被添加到 `selectedOptions` 数组中。如果用户取消选中一个选项，该选项的值将从 `selectedOptions` 数组中删除。

希望这可以帮助你实现下拉选项的多选。