vue实现精准查询
Vue实现精准查询的方法
精准查询通常需要结合输入的关键词与数据进行严格匹配，以下是几种常见的实现方式：
使用计算属性过滤数据
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}在模板中直接使用计算属性：
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>使用watch监听查询变化
data() {
return {
searchQuery: '',
filteredItems: []
};
},
watch: {
searchQuery(newVal) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase() === newVal.toLowerCase()
);
}
}使用lodash的debounce优化性能
import { debounce } from 'lodash';
methods: {
search: debounce(function(query) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
}, 300)
}结合后端API实现精准查询
methods: {
async search() {
const response = await axios.get('/api/items', {
params: {
q: this.searchQuery,
exact: true
}
});
this.filteredItems = response.data;
}
}使用正则表达式实现更复杂的匹配
computed: {
filteredItems() {
const regex = new RegExp(`^${this.searchQuery}$`, 'i');
return this.items.filter(item => regex.test(item.name));
}
}注意事项
- 对于中文搜索，确保统一转换为相同的大小写或格式
- 大量数据时考虑分页或虚拟滚动优化性能
- 敏感字符需要进行转义处理
- 空查询时应返回全部数据或友好提示
以上方法可以根据具体需求组合使用，实现不同精度级别的查询功能。
