vue数组排序

// 定义一个 Vue 组件并演示数组排序

new Vue({
  el: '#app',
  data: {
    // 定义一个包含对象的数组
    items: [
      { name: 'apple', price: 50 },
      { name: 'banana', price: 30 },
      { name: 'orange', price: 40 }
    ]
  },
  methods: {
    // 按价格升序排序的方法
    sortByPriceAsc() {
      this.items.sort((a, b) => a.price - b.price);
    },
    // 按价格降序排序的方法
    sortByPriceDesc() {
      this.items.sort((a, b) => b.price - a.price);
    }
  }
});

解释说明：

1. 数据定义：items 是一个包含多个对象的数组，每个对象都有 name 和 price 属性。
2. 方法定义：
   • sortByPriceAsc 方法用于按价格升序排序。它使用了 JavaScript 的 sort 方法，并传入一个比较函数 (a, b) => a.price - b.price，该函数会根据 price 属性进行升序排列。
   • sortByPriceDesc 方法用于按价格降序排序。它同样使用了 sort 方法，但比较函数为 (a, b) => b.price - a.price，这样可以实现降序排列。

通过调用这两个方法，你可以对数组中的元素进行升序或降序排序。