vue 数组排序

// 定义一个数组，包含多个对象，每个对象有一个 name 和 age 属性
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];

// 使用 Vue 实例，并在 methods 中定义排序方法
new Vue({
  el: '#app',
  data: {
    users: users
  },
  methods: {
    sortByAge: function() {
      // 对 users 数组按照 age 属性进行升序排序
      this.users.sort((a, b) => a.age - b.age);
    },
    sortByName: function() {
      // 对 users 数组按照 name 属性进行字母顺序排序
      this.users.sort((a, b) => a.name.localeCompare(b.name));
    }
  }
});

// HTML 部分
<div id="app">
  <button @click="sortByAge">按年龄排序</button>
  <button @click="sortByName">按名字排序</button>
  <ul>
    <li v-for="user in users" :key="user.name">
      {{ user.name }} - {{ user.age }}
    </li>
  </ul>
</div>

解释说明：

1. 数据定义：我们定义了一个 users 数组，其中每个元素是一个对象，包含 name 和 age 属性。
2. Vue 实例：创建了一个 Vue 实例，并将 users 数组绑定到实例的 data 中。
3. 排序方法：
   • sortByAge 方法使用 JavaScript 的 sort 函数对 users 数组按照 age 属性进行升序排序。
   • sortByName 方法使用 localeCompare 方法对 users 数组按照 name 属性进行字母顺序排序。
4. HTML 部分：提供了两个按钮，分别调用 sortByAge 和 sortByName 方法来触发排序操作。列表部分使用 v-for 指令遍历并显示排序后的用户信息。

这样就可以在点击按钮时动态地对数组进行排序并更新视图。