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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
jquery json 实例代码
Dec 02 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
对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几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python中的rjust()方法使用详解
2015/05/19 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python语言的优势是什么
2020/06/17 Python
Python之字典对象的几种创建方法
2020/09/30 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
网络技术支持面试题
2013/04/22 面试题
年终考核评语
2014/01/19 职场文书
大学老师推荐信
2014/02/25 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
信用卡工资证明范本
2014/10/17 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
政审证明材料
2015/06/19 职场文书
干部培训简讯
2015/07/20 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server