我需要一段vue3模糊查询的代码
时间: 2023-03-23 11:04:19 浏览: 67
浅谈Vue3 Composition API如何替换Vue Mixins
5星 · 资源好评率100%
好的,我可以为您提供一段 Vue 3 中的模糊查询代码。
首先,您需要在模板中添加一个输入框,并为其绑定一个响应式数据,例如 `query`:
```html
<template>
<input v-model="query" placeholder="请输入查询关键字" />
</template>
```
然后,您可以使用 computed 属性来计算出符合查询条件的数据,例如:
```js
<script>
export default {
data() {
return {
query: '',
items: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.includes(this.query))
}
}
}
</script>
```
最后,在模板中使用过滤后的数据即可。例如:
```html
<template>
<ul>
<li v-for="item in filteredItems" :key="item.name">{{ item.name }}</li>
</ul>
</template>
```
希望这段代码能帮助您。
阅读全文