vue 下拉框多选

在Vue中实现下拉框多选功能可以使用`<el-select>`组件，并通过`v-model`绑定一个数组类型的变量来实现多选效果。\[2\]例如，可以将下拉框的`v-model`绑定到一个名为`value2`的变量上，该变量的初始值设置为一个空数组`\[\]`。同时，设置`multiple`属性为`true`，即可实现多选功能。\[2\]

下面是一个示例代码：

<el-select v-model="value2" multiple placeholder="请选择文章标签">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

在Vue的`data`选项中，需要定义`options`数组，其中包含了下拉框的选项。同时，定义一个名为`value2`的变量，并将其初始值设置为一个包含选中的选项的数组，例如`\['HTML', 'CSS'\]`。\[2\]

data() {
  return {
    options: \[
      { value: 'HTML', label: 'HTML' },
      { value: 'CSS', label: 'CSS' },
      { value: 'JavaScript', label: 'JavaScript' }
    \],
    value2: \['HTML', 'CSS'\]
  }
}

通过以上设置，即可实现Vue中的下拉框多选功能。\[1\]\[2\]
#### 引用[.reference_title]
- *1* [vue 下拉框多选校验问题](https://blog.csdn.net/weixin_41175479/article/details/111501262)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue下拉框多选](https://blog.csdn.net/weixin_48860638/article/details/124304027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue中的select下拉框多选](https://blog.csdn.net/m0_52539553/article/details/117227379)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]