vue计算属性实现搜索
使用计算属性实现搜索功能
在Vue中，计算属性（computed properties）可以高效地实现搜索功能，通过动态过滤数据列表。以下是一个完整的实现示例：
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>关键实现要点
计算属性filteredItems会根据searchQuery的变化自动重新计算，返回过滤后的数组。过滤逻辑使用Array.prototype.filter()方法和字符串的includes()方法。
搜索不区分大小写，通过将搜索词和被搜索内容都转换为小写实现。这种方式适合简单的客户端搜索场景。
性能优化建议
对于大型数据集，可以考虑以下优化方法：
- 添加防抖处理，避免频繁触发计算
- 使用Web Worker进行后台搜索
- 实现分页加载结果
高级搜索功能扩展
要实现更复杂的搜索，可以修改过滤逻辑：
filteredItems() {
const query = this.searchQuery.toLowerCase()
return this.items.filter(item =>
item.name.toLowerCase().includes(query) ||
item.description.toLowerCase().includes(query)
)
}这种方式可以同时搜索多个字段，满足更复杂的搜索需求。
