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 相关文章推荐
JS判定是否原生方法
Jul 22 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 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
用PHP 4.2书写安全的脚本
2006/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
Adodb的十个实例(清晰版)
2006/12/31 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python类装饰器实现方法详解
2018/12/21 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
医院领导班子整改方案
2014/10/01 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2014年实习生工作总结
2014/11/27 职场文书
学校中秋节活动总结
2015/03/23 职场文书
二审答辩状范文
2015/05/22 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书