vue实现商品搜索
实现商品搜索功能
在Vue中实现商品搜索功能，可以通过以下步骤完成。假设有一个商品列表，用户可以通过输入关键词来筛选商品。
1. 准备商品数据
商品数据可以存储在Vue组件的data中，也可以从后端API获取。以下是一个简单的商品数据示例：
data() {
return {
products: [
{ id: 1, name: 'iPhone 13', price: 999, category: '手机' },
{ id: 2, name: 'MacBook Pro', price: 1999, category: '电脑' },
{ id: 3, name: 'AirPods Pro', price: 249, category: '耳机' },
{ id: 4, name: 'iPad Air', price: 599, category: '平板' }
],
searchQuery: ''
};
}2. 创建搜索输入框
在模板中添加一个输入框，用于接收用户的搜索关键词。使用v-model绑定到searchQuery。
<template>
<div>
<input
type="text"
v-model="searchQuery"
placeholder="搜索商品..."
/>
<ul>
<li v-for="product in filteredProducts" :key="product.id">
{{ product.name }} - ¥{{ product.price }}
</li>
</ul>
</div>
</template>3. 实现搜索逻辑
通过计算属性filteredProducts实现搜索功能。根据searchQuery过滤商品列表，匹配商品名称或类别。
computed: {
filteredProducts() {
const query = this.searchQuery.toLowerCase();
return this.products.filter(product => {
return (
product.name.toLowerCase().includes(query) ||
product.category.toLowerCase().includes(query)
);
});
}
}4. 添加样式优化（可选）
可以为搜索框和结果列表添加一些样式，提升用户体验。
<style scoped>
input {
padding: 8px;
width: 300px;
margin-bottom: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #eee;
}
</style>5. 扩展功能（可选）
如果需要更复杂的搜索功能，可以结合以下方式：
- 使用
debounce减少频繁搜索请求。 - 添加多条件筛选（价格范围、类别等）。
- 调用后端API实现分页搜索。
methods: {
debounceSearch: _.debounce(function() {
// 调用API或处理搜索逻辑
}, 500)
}总结
通过以上步骤，可以实现一个基本的商品搜索功能。核心逻辑是通过计算属性动态过滤商品列表，响应输入框的变化。根据实际需求，可以进一步扩展功能或优化性能。
