当前位置：首页 > VUE

vue 实现数组排序

2026-02-17 17:14:36VUE

在 Vue 中实现数组排序的方法

Vue 提供了多种方式对数组进行排序，可以直接使用 JavaScript 的原生排序方法，也可以通过计算属性或方法实现。以下是几种常见的实现方式：

使用 JavaScript 的 sort() 方法

JavaScript 数组的 sort() 方法可以对数组元素进行排序。默认情况下，sort() 方法将元素转换为字符串并按 Unicode 码点排序。如果需要自定义排序规则，可以传入一个比较函数。

data() {
  return {
    numbers: [3, 1, 4, 1, 5, 9, 2, 6]
  }
},
methods: {
  sortNumbers() {
    this.numbers.sort((a, b) => a - b); // 升序排序
  }
}

使用计算属性实现排序

计算属性可以基于响应式数据动态计算值。通过计算属性对数组排序可以避免直接修改原始数组。

data() {
  return {
    fruits: ['banana', 'apple', 'orange', 'grape']
  }
},
computed: {
  sortedFruits() {
    return [...this.fruits].sort(); // 使用扩展运算符创建新数组
  }
}

在模板中直接调用排序方法

Vue 的模板语法支持直接调用方法，可以在模板中调用排序方法显示排序后的数组。

<template>
  <div>
    <p>Original: {{ numbers }}</p>
    <p>Sorted: {{ sortNumbers(numbers) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [5, 2, 8, 1, 4]
    }
  },
  methods: {
    sortNumbers(arr) {
      return [...arr].sort((a, b) => a - b);
    }
  }
}
</script>

对对象数组进行排序

当需要对对象数组按某个属性排序时，可以在比较函数中指定属性。

data() {
  return {
    users: [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      { name: 'Charlie', age: 20 }
    ]
  }
},
computed: {
  sortedUsers() {
    return [...this.users].sort((a, b) => a.age - b.age);
  }
}

注意事项