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


Posted in Javascript onAugust 30, 2018

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项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。

二、代码

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

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

三、结语

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

Javascript 相关文章推荐
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JQuery球队选择实例
May 18 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 #Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 #Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 #Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 #Javascript
You might like
一个域名查询的程序
2006/10/09 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python组合无重复三位数的实例
2018/11/13 Python
基于django传递数据到后端的例子
2019/08/16 Python
Java如何获得ResultSet的总行数
2016/09/03 面试题
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
董事会决议范本
2015/07/01 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python