vue.js 下拉多选框
时间: 2023-07-18 22:36:12 浏览: 63
你可以使用 Element UI 提供的 el-select 组件来实现 Vue.js 下拉多选框。下面是一个简单的示例:
```html
<template>
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
{ label: '选项4', value: 'option4' }
],
selectedOptions: []
}
}
}
</script>
```
在这个示例中,我们使用了 el-select 组件,并将 multiple 属性设置为 true 来启用多选模式。然后,我们使用 el-option 组件来渲染选项列表,使用 v-for 指令遍历 options 数组。对于每个选项,我们将 label 和 value 属性绑定到 option 对象的对应属性。最后,我们使用 v-model 指令将 selectedOptions 数组绑定到 el-select 组件,以实现选中的选项的跟踪。