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

vue中数组和对象的排序

1数组排序

<div id="app">
 <ul>
 <li v-for="a in arr1">{{a}}</li>
 </ul>
 </div>
 <script type="text/javascript">
 new Vue({
 el:"#app",
 data:{
 arr:[1,4,5,2,3,44]
 },computed:{
 arr1:function(){
 return this.arr.sort(sortNum)//调用排序方法
 }
 }
 })
 function sortNum(a,b){//排序方法
 return a-b;
 }
 </script>

2对象排序

<div id="app">
 <ul>
 <li v-for="(stu,index) in students1">{{stu}}</li>
 </ul>
 </div>
 <script type="text/javascript">
 new Vue({
 el:"#app",
 data:{
 students:[
 {name:"小a",age:20},
 {name:"小b",age:21},
 {name:"小c",age:18},
 {name:"小d",age:19},
 {name:"小f",age:18}
 ]
 },
 computed:{
 students1:function(){
 return sortKey(this.students,'age')
 }
 }
 })
 function sortKey(array,key){
 return array.sort(function(a,b){
 var x = a[key];
 var y = b[key];
 return ((x<y)?-1:(x>y)?1:0)
 })
 }
 </script>

一、前言

我在vue项目中遇到了一个表格排序的需求，根据某一项的值的大小从大到小调整数组顺序。

二、代码

表格大概是这个样子，样式和图片在代码中简化了。

<table class="recommend_table" cellspacing="0">
 <tr>
 <th>股票</th>
 <th @click="sort('in_price')">入选价</th>
 <th @click="sort('now_price')">最新价</th>
 <th @click="sort('increase')">模拟涨跌幅</th>
 </tr>
 <tr v-for="(item,index) in recommendlist" :key="index">
 <td>
 <div class="recommend_name">{{item.name}}</div>
 <div class="recommend_num">{{item.bn}}</div>
 </td>
 <td>{{item.in_price}}</td>
 <td>{{item.now_price}}</td>
 <td>{{item.increase}}%</td>
 </tr>
</table>

<script type="text/ecmascript-6">
 export default {
 data(){
 return{
 recommendlist: [
 { name:'高科石化', bn:'002778', in_price: 20.68, now_price: 28.68, increase: 10.01 },
 { name:'中孚信息', bn:'300659', in_price: 19.46, now_price: 17.46, increase: 9.06 },
 { name:'永福股份', bn:'300712', in_price: 17.68, now_price: 32.68, increase: 2.01 }
 ],
 sortType: 'in_price'
 }
 },
 methods: {
 sort(type) {
 this.sortType = type;
 this.recommendlist.sort(this.compare(type));
 // switch(type){
 // case 'in_price':
 // this.sortType = 'in_price';
 // this.recommendlist.sort(this.compare('in_price'));
 // break;
 // case 'now_price':
 // this.sortType = 'now_price';
 // this.recommendlist.sort(this.compare('now_price'));
 // break;
 // case 'increase':
 // this.sortType = 'increase';
 // this.recommendlist.sort(this.compare('increase'));
 // break;
 // }
 },
 compare(attr) {
 return function(a,b){
 var val1 = a[attr];
 var val2 = b[attr];
 return val2 - val1;
 }
 }
 }
 }
</script>

1. 排序方法

这里用到的是数组的sort方法，这个方法有一个需要注意的地方，就是不传参数的话，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。这并不是我们想要的排序方法，所以必须要传参。

sort方法的参数是一个函数，这个函数提供了一个比较方法，要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

1. 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
2. 若 a 等于 b，则返回 0。
3. 若 a 大于 b，则返回一个大于 0 的值。

compare(key) {
 return function(a,b){
 var val1 = a[key];
 var val2 = b[key];
 return val2 - val1;
 }
}

在代码中，compare函数中的匿名函数就是这样一个函数，但这个函数外面又嵌套了一层，这是因为需要根据数组中的某一项来排序，所以需要把这一项的key值传进来。

2. 调用排序方法

sort(type) {
 this.sortType = type;
 this.recommendlist.sort(this.compare(type));
 // switch(type){
 // case 'in_price':
 // this.sortType = 'in_price';
 // this.recommendlist.sort(this.compare('in_price'));
 // break;
 // case 'now_price':
 // this.sortType = 'now_price';
 // this.recommendlist.sort(this.compare('now_price'));
 // break;
 // case 'increase':
 // this.sortType = 'increase';
 // this.recommendlist.sort(this.compare('increase'));
 // break;
 // }
}

一开始我按照注释的部分写的，和我一样抽象能力不是特别好的人首先会想到要这样写，但是写出来之后发现三种情况不过是重复的代码，这时我就直接用最上面两行代码来代替，写完以后感觉内心一片平和。这种复用率高的代码简直让人太舒服了。

三、结语

虽然是一个简单的功能，但是非常值得归纳总结一下。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。