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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
JavaScript编码小技巧分享
Sep 17 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
javscript 数组扁平化的实现
2020/02/03 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
小学安全教育材料
2014/02/17 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
民事诉讼代理词
2015/05/25 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js