vue 根据数组中某一项的值进行排序的方法

Vue根据数组中某一项的值进行排序的方法：

1. 使用JavaScript的sort方法进行排序

Vue中的数据排序可以借助JavaScript的sort方法实现。以下是按照某一项属性值进行排序的代码示例：

// 数组对象
var data = [{
    id: 1,
    name: 'Tom',
    age: 23
}, {
    id: 2,
    name: 'Lucy',
    age: 19
}, {
    id: 3,
    name: 'Jack',
    age: 30
}];
// 按照age字段进行排序
data.sort(function(a, b) {
    return a.age - b.age;
});
console.log(data);

使用sort方法时，需要传入一个比较函数作为参数。该函数比较两个相邻元素，若返回值大于0，则交换其位置，否则保持不变。

1. 使用Vue的计算属性进行排序

Vue的计算属性可以方便地对数组进行排序。以下是按照某一项属性值进行排序的代码示例：

<template>
  <div>
    <ul>
      <li v-for="item in sortedData">{{item.id}} {{item.name}} {{item.age}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {id: 1, name: 'Tom', age: 23},
        {id: 2, name: 'Lucy', age: 19},
        {id: 3, name: 'Jack', age: 30},
      ],
      // 排序字段
      sortKey: 'age',
    }
  },
  computed: {
    sortedData() {
      return this.data.slice().sort((a, b) => a[this.sortKey] - b[this.sortKey])
    }
  }
}
</script>

以上代码中，使用slice()方法复制一份数据，以免改变原始数据；然后根据排序字段sortKey，通过sort方法进行排序。

另外，也可以加入一个排序方式的选项，做到升降序的切换：

<template>
  <div>
    <div>
      排序方式：
      <select v-model="sortOrder">
        <option value="asc">升序</option>
        <option value="desc">降序</option>
      </select>
    </div>
    <ul>
      <li v-for="item in sortedData">{{item.id}} {{item.name}} {{item.age}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {id: 1, name: 'Tom', age: 23},
        {id: 2, name: 'Lucy', age: 19},
        {id: 3, name: 'Jack', age: 30},
      ],
      sortKey: 'age',
      sortOrder: 'asc',
    }
  },
  computed: {
    sortedData() {
      let data = this.data.slice();
      return data.sort((a, b) => {
        let order = this.sortOrder === 'asc' ? 1 : -1;
        return (a[this.sortKey] - b[this.sortKey]) * order;
      })
    }
  }
}
</script>