vue数组对象排序的实现代码


Posted in Javascript onJune 20, 2018

前言

最近在看vue的教学视频,正好学到的数组对象排序方法,在这跟大家分享一下,如有不足之处,请赐教。

vue数组对象排序的实现代码

普通数组的排序

先看代码:

<div class="app">
   <h1>v-for实例</h1>
   <hr>
   <ol>
     <li v-for="number in numbers">{{number}}</li>
   </ol>
 </div> 
 <script>
 new Vue({
   el:'.app',
   data:{
     numbers:[5 ,88, 43, 56, 28, 61, 9],
   },
   computed:{
     numbers:function(){
       return this.numbers.sort(numbers);
     },
   }
 })

原本我以为会出来结果,可结果不一样。。

vue数组对象排序的实现代码

后来我想了一下,发现了其中的问题,sort方法会调用每个数组项的toString()方法,得到字符串,然后再对得到的字符串进行排序。sort()方法的参数就起到了作用,我们把这个参数叫做比较函数。

解决办法

加一个比较函数

function sortNumbers(a,b){
    return a-b;
  }

咦,怎么结果还是没出来??原来我是输出的时候忘记吧numbers换成sortNumbers。这是从小到大输出,那么从大到小呢?很简单就是return b-a,

结果如图所示:

vue数组对象排序的实现代码

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
 <div class="app">
   <h1>v-for实例</h1>
   <hr>
   <ol>
     <li v-for="number in sortNumbers">{{number}}</li>
   </ol>

 </div> 
 <script>
 new Vue({
   el:'.app',
   data:{
     numbers:[5 ,88, 43, 56, 28, 61, 9],

   },
   computed:{
    sortNumbers:function(){
       return this.numbers.sort( sortNumbers);
     },

   }
 });
  function sortNumbers(a,b){
      return a-b;
    }

</script>
</body>
</html>

数组对象的排序

如果数组项是对象,我们需要根据数组项的某个属性对数组进行排序,要怎么办呢?其实和前面的比较函数也差不多。所以我就只把部分代码分享出来了。

如何对这个数组进行age排序呢

students:[
        {name:'cjk',age:'38'} ,
        { name:'xxf',age:'29'},
        {name:'zk',age:'26'},
     ]

比较函数:

function sortByKey(array,key){
  return array.sort(function(a,b){
    var x = a[key];
    var y = b[key];
    return((x<y)?-1:((x>y)?1:0));
  })
}

这里我是用三元函数来判断的,也和下面这个代码效果一样

var compare = function (prop) {
  return function (obj1, obj2) {
    var val1 = obj1[prop];
    var val2 = obj2[prop];if (val1 < val2) {
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }      
  } 
}

我觉得这个代码有点冗杂,所以我就用了三元运算符来判断输出。

结果:

vue数组对象排序的实现代码

整个项目文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
 <div class="app">
   <h1>v-for实例</h1>
   <hr>
   <ol>
     <li v-for="number in sortNumbers">{{number}}</li>
   </ol>
   <hr>
   <ul>
    <li v-for="(student,index) in sortstudents">{{index+1}}:{{student.name}}-{{student.age}}</li>
   </ul>
 </div> 
 <script>
 new Vue({
   el:'.app',
   data:{
     numbers:[5 ,88, 43, 56, 28, 61, 9],
     students:[
        {name:'cjk',age:'38'} ,
        { name:'xxf',age:'29'},
        {name:'zk',age:'26'},
     ]
   },
   computed:{
    sortNumbers:function(){
       return this.numbers.sort( sortNumbers);
     },
     sortstudents:function(){
       return sortByKey(this.students,'age')
     }
   }
 });
function sortNumbers(a,b){
    return a-b;
  }
  //数组对象排序
function sortByKey(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>
</body>
</html>

结果:

vue数组对象排序的实现代码

希望这篇文章对新手有用,也希望你们能和我一起分享知识,一起成长。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
解析Vue.js中的组件
Feb 02 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
node thread.sleep实现示例
Jun 20 #Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 #Javascript
Vue.use源码学习小结
Jun 20 #Javascript
Vuex入门到上手教程
Jun 20 #Javascript
JavaScript 中的 this 工作原理
Jun 20 #Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 #Javascript
You might like
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python将list转为matrix的方法
2018/12/12 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python发送邮件实现基础解析
2020/08/14 Python
如何把python项目部署到linux服务器
2020/08/26 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
大型会议接待方案
2014/03/01 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
大学生入党群众意见书
2015/06/02 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
react中props 的使用及进行限制的方法
2021/04/28 Javascript