vue 实现查询
Vue 实现查询功能
在 Vue 中实现查询功能通常涉及以下几个步骤：
数据绑定与输入处理
使用 v-model 绑定输入框的值到 Vue 实例的数据属性。例如，在模板中添加一个输入框：
<input v-model="searchQuery" placeholder="输入查询内容" />在 Vue 实例的 data 中定义 searchQuery 和原始数据列表：
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
}计算属性过滤数据
通过计算属性动态过滤数据，避免直接修改原始数据。计算属性会根据 searchQuery 的变化自动更新：
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}渲染过滤结果
在模板中遍历计算属性 filteredItems 显示过滤后的结果：
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>优化性能
对于大型数据集，可以添加防抖（debounce）减少频繁触发过滤。使用 Lodash 的 _.debounce 或在方法中手动实现：
methods: {
debouncedSearch: _.debounce(function() {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}, 300)
}异步数据查询
如果需要从 API 获取数据，可以在 watch 中监听 searchQuery 变化并调用接口：
watch: {
searchQuery(newVal) {
if (newVal.length > 2) { // 避免短查询
this.fetchData(newVal)
}
}
},
methods: {
async fetchData(query) {
const response = await axios.get(`/api/items?q=${query}`)
this.items = response.data
}
}高级功能扩展
- 支持多字段查询：在过滤逻辑中检查多个字段
- 添加加载状态：在异步查询时显示加载指示器
- 实现分页：结合分页组件处理大量数据
以上方法可以根据具体需求组合或调整，核心思想是通过响应式数据绑定和计算属性实现动态查询功能。
