vue实现查询
Vue 实现查询功能
在 Vue 中实现查询功能通常涉及数据绑定、事件处理和过滤逻辑。以下是几种常见的方法：
双向绑定与计算属性
通过 v-model 绑定输入框，利用计算属性动态过滤数据列表：
<template>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
originalList: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' }
]
}
},
computed: {
filteredList() {
return this.originalList.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>使用 Watch 监听查询
当需要异步操作时，可以使用 watch 监听查询变化：
watch: {
searchQuery(newVal) {
this.fetchData(newVal) // 调用API或其他异步操作
}
}结合第三方库
对于复杂搜索，可集成 lodash 的防抖函数优化性能：
import { debounce } from 'lodash'
methods: {
handleSearch: debounce(function(query) {
// 执行搜索逻辑
}, 300)
}服务端查询
若数据量较大，建议通过 API 提交查询参数到后端：
methods: {
async search() {
const res = await axios.get('/api/items', {
params: { q: this.searchQuery }
})
this.results = res.data
}
}注意事项
- 对输入内容进行大小写统一处理（如
toLowerCase()） - 添加加载状态提示异步操作
- 空查询时应显示完整列表或友好提示
