帮我i用vue3写一个模糊查询
时间: 2023-05-23 21:03:22 浏览: 57
好的,下面是一个基于Vue3实现的模糊查询的示例代码:
```html
<template>
<div>
<input v-model="query" type="text" placeholder="请输入关键字" />
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
data() {
return {
list: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
{ id: 4, name: 'watermelon' },
{ id: 5, name: 'pear' },
],
query: '',
};
},
computed: {
filteredList() {
if (!this.query) {
return this.list;
}
const queryLower = this.query.toLowerCase();
return this.list.filter((item) => item.name.toLowerCase().includes(queryLower));
},
},
};
</script>
```
这个示例代码中,我们使用了一个`list`数组来存储我们需要查询的数据。在模板中,我们绑定了一个`query`变量来表示用户输入的关键字。我们使用`v-model`指令来将输入框和`query`变量绑定起来。
接着,我们使用一个计算属性`filteredList`来过滤列表。如果`query`为空,就直接返回原始列表。否则,我们先将`query`转换为小写字母,并通过`filter`函数来过滤出包含该关键字的项。
最后,我们在模板中使用`v-for`指令来循环渲染过滤后的结果,并使用`key`属性来提高性能。