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 相关文章推荐
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 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
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
js使用心得分享
2015/01/13 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
多版本Python共存的配置方法
2017/05/22 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python flask实现分页效果
2017/06/27 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python如何随机生成高强度密码
2020/08/19 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
安全生产宣传标语
2014/06/06 职场文书
迎新晚会策划方案
2014/06/13 职场文书
三人合伙协议书范本
2014/10/29 职场文书
出国留学自荐信模板
2015/03/06 职场文书
公司仓库管理制度
2015/08/04 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技