写一段vue3的模糊查询
时间: 2023-11-03 17:08:01 浏览: 34
假设我们有一个包含姓名和年龄的人员列表,我们想要实现一个模糊查询功能,可以根据输入的关键词来筛选出符合条件的人员。下面是一个示例代码:
```html
<template>
<div>
<input v-model="searchText" placeholder="请输入姓名或年龄关键词">
<ul>
<li v-for="person in filteredPersons" :key="person.id">
{{ person.name }} - {{ person.age }}
</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const persons = reactive([
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 30 },
{ id: 3, name: '王五', age: 25 }
])
const searchText = reactive('')
const filteredPersons = computed(() => {
const keyword = searchText.trim().toLowerCase()
if (!keyword) {
return persons
}
return persons.filter(person => {
return person.name.toLowerCase().includes(keyword) ||
person.age.toString().includes(keyword)
})
})
return {
searchText,
filteredPersons
}
}
}
</script>
```
在上面的代码中,我们使用 `reactive` 函数来创建响应式对象,包括人员列表 `persons` 和搜索关键词 `searchText`。然后使用 `computed` 函数来计算过滤后的人员列表 `filteredPersons`。在计算函数中,我们首先将搜索关键词转换为小写字母并去除两端空格。然后根据关键词和每个人员的姓名和年龄进行比较,如果包含关键词则返回 `true`,否则返回 `false`。最后使用 `filter` 函数过滤掉不符合条件的人员,返回过滤后的人员列表。
在模板中,我们使用 `v-model` 指令将输入框的值与 `searchText` 绑定,当输入框的值发生变化时,`searchText` 也会相应地更新。然后使用 `v-for` 指令遍历 `filteredPersons` 数组,将每个人员的姓名和年龄显示在列表中。
这样,我们就实现了一个简单的模糊查询功能。当用户输入关键词时,列表会实时更新,只显示符合条件的人员。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)