vue实现商品排序
实现商品排序功能
在Vue中实现商品排序功能可以通过计算属性或方法对数据进行处理。以下是一个完整的实现方案，包含价格、销量和综合排序三种常见方式。
数据准备
假设商品数据存储在goodsList数组中，每个商品对象包含price、sales等属性：
data() {
return {
goodsList: [
{ id: 1, name: '商品A', price: 199, sales: 120 },
{ id: 2, name: '商品B', price: 299, sales: 80 },
{ id: 3, name: '商品C', price: 99, sales: 200 }
],
sortType: '' // 当前排序类型
}
}计算属性实现
使用计算属性返回排序后的列表：
computed: {
sortedGoods() {
const list = [...this.goodsList]
switch(this.sortType) {
case 'priceAsc':
return list.sort((a, b) => a.price - b.price)
case 'priceDesc':
return list.sort((a, b) => b.price - a.price)
case 'sales':
return list.sort((a, b) => b.sales - a.sales)
default:
return list
}
}
}方法实现
也可以使用方法来处理排序：
methods: {
sortGoods(type) {
this.sortType = type
}
}模板部分
在模板中添加排序按钮并展示结果：
<div class="sort-buttons">
<button @click="sortGoods('')">综合</button>
<button @click="sortGoods('priceAsc')">价格升序</button>
<button @click="sortGoods('priceDesc')">价格降序</button>
<button @click="sortGoods('sales')">销量排序</button>
</div>
<ul>
<li v-for="item in sortedGoods" :key="item.id">
{{ item.name }} - 价格:{{ item.price }} 销量:{{ item.sales }}
</li>
</ul>样式优化
为当前选中状态添加样式反馈：
.sort-buttons button.active {
background-color: #42b983;
color: white;
}在模板中动态绑定class：
<button
@click="sortGoods('priceAsc')"
:class="{ active: sortType === 'priceAsc' }"
>
价格升序
</button>性能考虑
对于大型数据集，建议：
- 使用lodash的_.orderBy代替原生sort
- 添加防抖处理频繁排序操作
- 考虑分页加载已排序数据
这种实现方式保持了Vue的响应式特性，当原始数据变化时，排序结果会自动更新。通过计算属性缓存排序结果，避免不必要的重复计算。
