vue 实现查找数据
在 Vue 中实现数据查找功能
使用计算属性实现查找
计算属性可以根据输入的关键字动态过滤数据，适合简单的查找场景。
<template>
<input v-model="searchTerm" placeholder="输入关键字">
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
searchTerm: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
)
}
}
}
</script>使用 watch 和 methods 实现查找
当需要更复杂的查找逻辑或异步操作时，可以使用 watch 配合 methods。
<script>
export default {
data() {
return {
searchTerm: '',
filteredItems: [],
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' }
]
}
},
watch: {
searchTerm(newVal) {
this.filterItems(newVal)
}
},
methods: {
filterItems(term) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(term.toLowerCase())
)
}
},
created() {
this.filteredItems = [...this.items]
}
}
</script>使用第三方库实现高级查找
对于大型数据集或复杂搜索需求，可以使用 lodash 的 _.debounce 或 Fuse.js 等库优化性能。
import { debounce } from 'lodash'
export default {
methods: {
filterItems: debounce(function(term) {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(term.toLowerCase())
)
}, 300)
}
}使用 Vuex 管理查找状态
在大型应用中，可以通过 Vuex 集中管理搜索状态和逻辑。
// store.js
export default new Vuex.Store({
state: {
searchTerm: '',
items: [...]
},
getters: {
filteredItems: state => {
return state.items.filter(item =>
item.name.toLowerCase().includes(state.searchTerm.toLowerCase())
)
}
}
})服务器端查找实现
当数据量很大时，应该通过 API 请求在服务器端进行查找。
methods: {
async searchItems() {
const response = await axios.get('/api/items', {
params: { q: this.searchTerm }
})
this.filteredItems = response.data
}
}以上方法可以根据具体需求选择使用，计算属性方式适合简单场景，而 watch 和 methods 组合更适合复杂逻辑，第三方库能提供性能优化，Vuex 适合状态管理，服务器端查找则适合大数据量情况。
