vue实现静态查询
Vue 实现静态查询
在 Vue 中实现静态查询通常指不依赖后端接口,直接在前端处理数据筛选或搜索功能。以下是几种常见实现方式:
使用计算属性过滤数据
通过计算属性对静态数据进行筛选,适合简单查询场景:
<template>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>
使用 methods 方法实现复杂查询
当查询逻辑较复杂时,可以使用 methods 方法:
methods: {
filterItems() {
return this.items.filter(item => {
const matchesSearch = item.name.toLowerCase().includes(
this.searchQuery.toLowerCase()
)
// 可以添加其他过滤条件
return matchesSearch
})
}
}
结合 Lodash 进行高效查询
对于大数据量或需要性能优化的场景,可以使用 Lodash 的防抖函数:
import { debounce } from 'lodash'
export default {
data() {
return {
searchQuery: '',
filteredItems: []
}
},
watch: {
searchQuery: debounce(function(newVal) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(newVal.toLowerCase())
)
}, 300)
}
}
实现多条件组合查询
对于需要多个筛选条件的场景:
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesName = item.name.toLowerCase().includes(
this.searchQuery.toLowerCase()
)
const matchesCategory = this.selectedCategory
? item.category === this.selectedCategory
: true
return matchesName && matchesCategory
})
}
}
使用 Vuex 管理静态查询
当数据需要在多个组件间共享时:
// store.js
state: {
items: [...],
searchQuery: ''
},
getters: {
filteredItems: state => {
return state.items.filter(item =>
item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
)
}
}
这些方法可以根据实际需求组合使用,实现从简单到复杂的各种静态查询功能。对于大数据量场景,建议添加虚拟滚动或分页功能优化性能。







