vue3怎么实现对年龄的排序

在 Vue 3 中，你可以使用 `v-model` 绑定数据、`<template>` 结构展示数据，并结合数组的内置方法如 `sort()` 来实现年龄的排序。假设你有一个包含用户对象列表的数据数组，每个用户对象都有一个 `age` 属性，你可以这样做：

<template>
  <ul>
    <li v-for="user in sortedUsers" :key="user.id">
      {{ user.name }} ({{ user.age }})
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
        // ... 更多用户对象
      ],
    };
  },
  computed: {
    sortedUsers() {
      // 使用 JavaScript 的 sort 方法按年龄排序，可以自定义比较函数
      return this.users.sort((a, b) => a.age - b.age);
    },
  },
};
</script>

在这个例子中，`sortedUsers` 计算属性会在数据变化时自动更新，因为它是依赖于 `users` 数组的。每次遍历的都是已排序的用户列表。