vue实现精准查询
实现精准查询的Vue方案
使用计算属性过滤数据
在Vue中通过计算属性实现精准查询是最直接的方式。定义需要查询的数据列表和查询关键词，计算属性会自动根据关键词过滤出匹配项。
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())
)
}
}添加防抖优化性能
频繁触发搜索会影响性能，通过lodash的debounce函数可以优化查询体验。
import { debounce } from 'lodash'
methods: {
handleSearch: debounce(function(query) {
this.searchQuery = query
}, 300)
}使用Vuex管理状态
对于大型应用，建议将搜索逻辑放在Vuex中集中管理。
// store.js
state: {
searchResults: []
},
mutations: {
SET_SEARCH_RESULTS(state, results) {
state.searchResults = results
}
},
actions: {
searchItems({ commit }, query) {
const results = items.filter(item =>
item.name.includes(query)
)
commit('SET_SEARCH_RESULTS', results)
}
}结合后端API实现
实际项目中通常需要调用API接口实现精准查询。
methods: {
async searchItems() {
try {
const response = await axios.get('/api/items', {
params: { q: this.searchQuery }
})
this.items = response.data
} catch (error) {
console.error(error)
}
}
}添加高级查询功能
通过扩展查询条件实现更精准的搜索。
data() {
return {
searchOptions: {
name: '',
category: '',
priceRange: [0, 100]
}
}
},
computed: {
filteredItems() {
return this.items.filter(item => {
const nameMatch = item.name.includes(this.searchOptions.name)
const categoryMatch = item.category === this.searchOptions.category
const priceMatch = item.price >= this.searchOptions.priceRange[0] &&
item.price <= this.searchOptions.priceRange[1]
return nameMatch && categoryMatch && priceMatch
})
}
}实现模糊查询转精准查询
先进行模糊查询，用户选择后转为精准查询。
data() {
return {
isExactMatch: false,
selectedItem: null
}
},
methods: {
toggleExactMatch(item) {
this.isExactMatch = true
this.selectedItem = item
this.searchQuery = item.name
}
}
