vue实现搜索商品
实现商品搜索功能（Vue）
数据准备
创建商品数据数组，包含名称、价格等字段
data() {
return {
products: [
{ id: 1, name: '苹果', price: 5.99 },
{ id: 2, name: '香蕉', price: 3.49 },
{ id: 3, name: '橙子', price: 4.99 }
],
searchQuery: ''
}
}搜索输入框
在模板中添加搜索输入框，绑定searchQuery
<template>
<div>
<input
v-model="searchQuery"
placeholder="搜索商品..."
>
</div>
</template>计算属性过滤
使用计算属性实现搜索逻辑
computed: {
filteredProducts() {
const query = this.searchQuery.toLowerCase()
return this.products.filter(product =>
product.name.toLowerCase().includes(query)
)
}
}显示搜索结果
在模板中展示过滤后的商品列表
<ul>
<li v-for="product in filteredProducts" :key="product.id">
{{ product.name }} - ￥{{ product.price }}
</li>
</ul>优化搜索性能
添加防抖函数减少频繁搜索
methods: {
debounceSearch: _.debounce(function() {
this.filteredProducts = this.products.filter(product =>
product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}, 300)
}多字段搜索
扩展搜索功能支持价格范围
computed: {
filteredProducts() {
const query = this.searchQuery.toLowerCase()
return this.products.filter(product =>
product.name.toLowerCase().includes(query) ||
product.price.toString().includes(query)
)
}
}空状态提示
添加无结果时的提示信息
<p v-if="filteredProducts.length === 0 && searchQuery">
没有找到匹配的商品
</p>
