vue实现列表查询功能
Vue 列表查询功能实现
核心思路：通过 v-model 绑定搜索关键词，利用计算属性或方法动态过滤列表数据。
基础实现代码示例
<template>
<div>
<input v-model="searchQuery" placeholder="搜索关键词">
<ul>
<li v-for="item in filteredList" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
originalList: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
},
computed: {
filteredList() {
return this.originalList.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>高级功能扩展
多条件搜索
computed: {
filteredList() {
return this.originalList.filter(item => {
const matchesName = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
const matchesCategory = item.category.toLowerCase().includes(this.categoryQuery.toLowerCase())
return matchesName && matchesCategory
})
}
}防抖优化
import _ from 'lodash'
methods: {
debouncedSearch: _.debounce(function() {
this.filteredList = this.originalList.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}, 300)
}服务端查询实现
methods: {
async searchItems() {
try {
const response = await axios.get('/api/items', {
params: {
q: this.searchQuery
}
})
this.filteredList = response.data
} catch (error) {
console.error(error)
}
}
}注意事项
- 对中文搜索需确保比较字符串的统一编码格式
- 大数据量列表建议采用分页加载方式
- 敏感字符输入需做转义处理防止XSS攻击
- 移动端需考虑虚拟列表优化性能
