Vue商品价格排序怎么写

在Vue中实现商品价格排序的方法有很多，以下是一种基本的实现：

1. 在data中定义一个排序方式的对象，用于保存当前选中的排序方式：

   data() {
       return {
           sortType: 'default'
       }
   }

2. 在模板中添加一个排序方式选择器，用于让用户选择排序方式：

   <div>
       <label for="sortType">排序方式：</label>
       <select id="sortType" v-model="sortType">
           <option value="default">默认排序</option>
           <option value="price-asc">价格从低到高</option>
           <option value="price-desc">价格从高到低</option>
       </select>
       <button @click="sortByPrice">排序</button>
   </div>

3. 在methods中添加一个排序方法，根据用户选择的排序方式对商品列表进行排序：

   methods: {
       sortByPrice() {
           switch (this.sortType) {
               case 'price-asc':
                   this.filteredProducts.sort((a, b) => a.price - b.price);
                   break;
               case 'price-desc':
                   this.filteredProducts.sort((a, b) => b.price - a.price);
                   break;
               default:
                   // 默认排序
                   break;
           }
       }
   }

4. 在mounted生命周期中初始化商品列表和筛选结果：

   mounted() {
       // 获取商品列表
       this.products = getProducts();
       // 初始化筛选结果
       this.filteredProducts = this.products;
   }

这样就实现了一个基本的商品价格排序功能。当用户选择排序方式并点击排序按钮时，会根据选择的排序方式对商品列表进行排序，并展示排序结果。