vue3 v-for 排序

Vue 3 中的 v-for 指令用于在模板中渲染列表。如果你想对渲染的列表进行排序，你通常需要在 JavaScript 中进行排序操作，然后将排序后的数组传递给 v-for 指令。这里是一个简单的例子，展示了如何在 Vue 3 组件中对数组进行排序，并使用 v-for 进行渲染：

1. 首先，在你的 Vue 组件的 `data` 函数中定义一个初始数组：

data() {
  return {
    items: [
      { name: 'Item C', value: 3 },
      { name: 'Item A', value: 1 },
      { name: 'Item B', value: 2 }
    ]
  }
}

2. 在你的模板中，使用 v-for 指令来遍历排序后的数组：

<template>
  <ul>
    <li v-for="item in sortedItems" :key="item.value">
      {{ item.name }}
    </li>
  </ul>
</template>

3. 在组件的 `computed` 属性中创建一个计算属性 `sortedItems`，该属性会根据特定的排序逻辑返回一个新的数组：

computed: {
  sortedItems() {
    return this.items.slice().sort((a, b) => a.value - b.value);
  }
}

在这个例子中，`sortedItems` 是一个计算属性，它首先使用 `slice()` 方法创建 `items` 数组的一个副本，然后使用 `sort()` 方法对副本进行排序。排序函数 `(a, b) => a.value - b.value` 是按照 `value` 属性的升序排列的。

需要注意的是，`sort()` 方法会直接对原数组进行排序，所以使用 `slice()` 创建副本是为了避免修改原始数据。