vue根据数组中某一项的值进行排序的方法-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

vue中数组和对象的排序

创新互联是一家专注于网站设计制作、成都网站建设与策划设计,平顶山网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:平顶山等地区。平顶山做网站价格咨询:13518219792

1数组排序


  
   {{a}}

2对象排序


   
    {{stu}}

一、前言

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

二、代码

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

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


 
  股票
  入选价
  最新价
  模拟涨跌幅
 
 
  
   {{item.name}}
   {{item.bn}}
  
  {{item.in_price}}
  {{item.now_price}}
  {{item.increase}}%

股票	入选价	最新价	模拟涨跌幅
{{item.name}} {{item.bn}}	{{item.in_price}}	{{item.now_price}}	{{item.increase}}%

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;
 // }
}

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

三、结语

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

名称栏目：vue根据数组中某一项的值进行排序的方法
链接地址：http://lswzjz.com/article/gcejhe.html

新闻中心

其他资讯