Vue 数组对象排序（包含时间格式排序）
最后完成后的效果大概是这样
1. 排序方法
这里用到的是数组的sort方法，这个方法有一个需要注意的地方，就是不传参数的话，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。这并不是我们想要的排序方法，所以必须要传参。
sort方法的参数是一个函数，这个函数提供了一个比较方法，要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。
[ 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 ][ 若 a 等于 b，则返回 0。 ][ 若 a 大于 b，则返回一个大于 0 的值。 ]
compare(attr){ // 排序方法let that = this;return function(a,b){let val1 = a[attr];let val2 = b[attr];if(that.order){if(that.sortType == 'time'){ // 如果是时间就转换成时间格式return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));}else{return val2 - val1;}}else{if(that.sortType == 'time'){ // 如果是时间就转换成时间格式return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));}else{return val1 - val2;}}}}
在代码中，compare函数中的匿名函数就是这样一个函数，但这个函数外面又嵌套了一层，这是因为需要根据数组中的某一项来排序，所以需要把这一项的key值传进来。
– 好了，下面放一下整体代码：
<template><div class="top"><div class="th name">顾客名称</div><div class="th phone">手机号码</div><div class="th ticket" @click="sort('ticket')">卡券<i class="fa fa-exchange" aria-hidden="true"></i></div><div class="th integral" @click="sort('integral')">积分<i class="fa fa-exchange" aria-hidden="true"></i></div><div class="handle"></div><div class="th time" @click="sort('time')">创建时间<i class="fa fa-exchange" aria-hidden="true"></i></div></div></template>
js
<script>data: function(){return {Dmessages: [{name: '吴娇',phone: 1526530,ticket: 3,integral: 300000,time:'-1-19',},{name: '忙着长肉',phone: 1526530,ticket: 2,integral: 50000,time:'-1-29'},{name: '刘珊珊',phone: 1526530,ticket: 5,integral: 3000,time:'-1-22'},{name: '刘珊珊',phone: 1526530,ticket: 9,integral: 90000,time:'-1-30'}],sortType: null, // 数组对象中的哪一个属性进行排序order: false, // 升序还是降序}},methods: {sort(type){ // 排序this.order = !this.order;// 更改为 升序或降序this.sortType = type;this.Dmessages.sort(pare(type));// 调用下面 compare 方法 并传值},compare(attr){ // 排序方法let that = this;return function(a,b){let val1 = a[attr];let val2 = b[attr];if(that.order){if(that.sortType == 'time'){ // 如果是时间就转换成时间格式return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));}else{return val2 - val1;}}else{if(that.sortType == 'time'){return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));}else{return val1 - val2;}}}}},</script>
虽然是一个简单的功能，但是还是非常值得总结一下。
