vue实现查询功能
Vue 实现查询功能的方法
数据绑定与输入框
在 Vue 中实现查询功能，通常需要使用 v-model 绑定输入框的值到数据属性。例如：
<template>
<input v-model="searchQuery" placeholder="输入搜索关键词" />
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: ['Apple', 'Banana', 'Orange']
};
}
};
</script>计算属性过滤数据
通过计算属性动态过滤数据，避免直接修改原始数据。计算属性会根据 searchQuery 的变化自动更新：
computed: {
filteredItems() {
return this.items.filter(item =>
item.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
}显示过滤结果
在模板中渲染过滤后的结果：
<ul>
<li v-for="item in filteredItems" :key="item">
{{ item }}
</li>
</ul>使用第三方库优化搜索
对于复杂搜索需求，可以使用 Lodash 的 _.debounce 减少计算频率，提升性能：
import { debounce } from 'lodash';
export default {
methods: {
handleSearch: debounce(function() {
// 搜索逻辑
}, 300)
}
};结合后端搜索
若数据量较大，需通过 API 请求后端搜索接口：
methods: {
async fetchSearchResults() {
const response = await axios.get('/api/search', {
params: { q: this.searchQuery }
});
this.results = response.data;
}
}注意事项
- 输入框可添加
@input或@change事件触发搜索。 - 空查询时应显示全部数据或友好提示。
- 对中文或特殊字符需确保大小写和编码处理一致。
以上方法可根据实际需求组合使用，实现从简单到复杂的查询功能。
