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

时间:2021-05-26

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方法的参数是一个函数,这个函数提供了一个比较方法,要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 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; // }}

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

    三、结语

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章