Vue商品价格筛选怎么写
时间: 2023-10-01 08:11:27 浏览: 272
在Vue中实现商品价格筛选的方法有很多,以下是一种基本的实现:
1. 在data中定义一个价格区间的对象,用于保存当前选中的价格区间:
```
data() {
return {
priceRange: {
min: 0,
max: 9999
}
}
}
```
2. 在模板中添加一个价格区间选择器,用于让用户选择价格范围:
```
<div>
<label for="minPrice">最低价:</label>
<input type="number" id="minPrice" v-model="priceRange.min">
<label for="maxPrice">最高价:</label>
<input type="number" id="maxPrice" v-model="priceRange.max">
<button @click="filterByPrice">筛选</button>
</div>
```
3. 在methods中添加一个筛选方法,用于根据用户选择的价格区间过滤商品列表:
```
methods: {
filterByPrice() {
this.filteredProducts = this.products.filter(product => {
return product.price >= this.priceRange.min && product.price <= this.priceRange.max;
});
}
}
```
4. 在mounted生命周期中初始化商品列表和筛选结果:
```
mounted() {
// 获取商品列表
this.products = getProducts();
// 初始化筛选结果
this.filteredProducts = this.products;
}
```
这样就实现了一个基本的商品价格筛选功能。当用户选择价格区间并点击筛选按钮时,会根据选择的价格区间过滤商品列表,并展示筛选结果。
阅读全文