vue 搜索框多选值
时间: 2023-10-08 20:13:55 浏览: 30
在 Vue 中,你可以使用多种方法来实现搜索框的多选值。以下是其中一种常见的实现方法:
1. 创建一个包含所有选项的数组,并使用 `v-model` 指令绑定一个用于存储选中值的数据属性。例如,你可以创建一个名为 `selectedValues` 的数组来存储选中的值。
```html
<template>
<div>
<input type="text" v-model="searchInput" @input="filterOptions" />
<ul>
<li v-for="option in filteredOptions" :key="option.id">
<label>
<input type="checkbox" :value="option.value" v-model="selectedValues" />
{{ option.label }}
</label>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchInput: '',
options: [
{ id: 1, label: 'Option 1', value: 'option1' },
{ id: 2, label: 'Option 2', value: 'option2' },
{ id: 3, label: 'Option 3', value: 'option3' }
// 其他选项...
],
selectedValues: []
};
},
computed: {
filteredOptions() {
// 根据搜索输入过滤选项
return this.options.filter(option =>
option.label.toLowerCase().includes(this.searchInput.toLowerCase())
);
}
},
methods: {
filterOptions() {
// 在这里可以做一些其他的筛选逻辑
// 这只是一个简单的示例
}
}
};
</script>
```
在上述示例中,我们使用 `v-for` 指令遍历 `filteredOptions` 数组,并在每个选项上绑定一个复选框。通过使用 `v-model` 指令绑定 `selectedValues` 数组,我们可以跟踪所选中的值。
你还可以根据需要进行搜索框的样式和逻辑的修改。此示例仅提供了最简单的实现方式,你可以根据自己的具体需求进行修改和扩展。