写一个vue3 input模糊搜索
时间: 2023-11-04 22:06:03 浏览: 53
好的,下面是一个简单的vue3 input模糊搜索示例:
```
<template>
<div>
<input type="text" v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const items = [
{ id: 1, title: "Item 1" },
{ id: 2, title: "Item 2" },
{ id: 3, title: "Another Item" },
{ id: 4, title: "Something Else" }
]
const state = reactive({
searchQuery: ''
})
const filteredItems = computed(() => {
if (state.searchQuery.trim() !== '') {
return items.filter(item => {
return item.title.toLowerCase().includes(state.searchQuery.trim().toLowerCase())
})
} else {
return items
}
})
return {
state,
filteredItems
}
}
}
</script>
```
在上面的代码中,我们首先定义了一个包含搜索关键词和项目的响应式`state`对象。然后,我们使用`computed`属性计算出与搜索关键词匹配的过滤后的项目列表。最后,我们根据搜索关键词和过滤后的项目列表更新视图。