vue select多选组件

Vue Select是一个基于Vue.js的动态选择框组件库，它提供了一个易于使用的API来创建支持单选、多选功能的选择列表。在Vue Select的多选模式下，用户可以选择并保留多个选项，常见的应用场景包括商品筛选、标签选择等。

Vue Select的多选组件一般有以下几个关键特性：

1. **v-model绑定**: 使用`v-model`指令双向绑定数据，当用户在选择框中选择或取消选择选项时，数据会实时更新。

2. **multiple属性**: 设置为`true`时，表示选择框允许多项选择。

3. **options数组**: 需要提供一个包含选项的对象数组供用户选择，每个对象通常包含`label`和`value`字段。

4. **默认值**: 可以通过设置`v-model`的初始值为一个数组来预设默认选中的选项。

5. **事件处理**: 提供了`@input`、`@change`等事件，可以监听用户的选中变化。

<template>
  <vue-select :multiple="true" v-model="selectedOptions">
    <option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></option>
  </vue-select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 初始化为空数组
      options: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        // ...
      ]
    };
  }
};
</script>