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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
实例讲解vue源码架构
Jan 24 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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
咖啡语言
2021/03/03 咖啡文化
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
python多线程使用方法实例详解
2019/12/30 Python
pymysql的简单封装代码实例
2020/01/08 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
三年级科学教学反思
2014/01/29 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
三问三解心得体会
2014/09/05 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
redis lua限流算法实现示例
2022/07/15 Redis
keepalived + nginx 实现高可用方案
2022/12/24 Servers