<v-select 实时模糊查询
时间: 2023-12-23 09:05:58 浏览: 31
你可以通过使用 Vue.js 的 v-select 组件和一个输入框来实现实时模糊查询。首先,你需要在你的 Vue.js 项目中安装 v-select 组件:
```
npm install vue-select --save
```
然后在你的组件中引入它,并设置一个数组作为选项列表:
```
<template>
<div>
<v-select v-model="selected" :options="options" :filterable="true" placeholder="Search"></v-select>
</div>
</template>
<script>
import vSelect from 'vue-select'
export default {
components: {
vSelect
},
data() {
return {
selected: null,
options: [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
{ label: 'Durian', value: 'durian' },
{ label: 'Elderberry', value: 'elderberry' },
{ label: 'Fig', value: 'fig' },
{ label: 'Grape', value: 'grape' },
{ label: 'Honeydew', value: 'honeydew' }
]
}
}
}
</script>
```
在上面的代码中,我们设置了一个选项列表,其中每个选项都有一个标签和一个值。v-select 组件的 `:options` 属性用于指定选项列表,而 `:filterable="true"` 属性将启用过滤器,允许用户输入进行模糊查询。最后,我们将 `v-model` 绑定到 `selected` 变量上,以便在用户进行选择时更新它。
现在你的 v-select 组件将会在用户输入时实时过滤选项列表,并且只显示与输入匹配的选项。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)