广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue给数组中对象排序sort函数的用法
  • 122
分享到

vue给数组中对象排序sort函数的用法

2024-04-02 19:04:59 122人浏览 泡泡鱼
摘要

目录Vue给数组中对象排序 sort函数vue小技巧:简单排序和对象排序对于数组里面全是number对于一个对象 有多种类型vue给数组中对象排序 sort函数 开发穿梭框的时候,需

vue给数组中对象排序 sort函数

开发穿梭框的时候,需要将左侧选中的数据排序后添加到右侧

先看代码吧,后面解释

originalData为左侧选择的数据:

var originalData =[{name: 'Tom'},{name: 'Andy'},{name: 'Marry'},{name: 'Tina'}];

先给每个对象添加一个排序order:

for (let i = 0; i < originalData.length; i++) {
     this.originalData[i]['order'] = i
}

添加后为:

var originalData =[{name: 'Tom',order: 1},{name: 'Andy',order: 2},{name: 'Marry',order: 3},{name: 'Tina',order: 4}];

写一个排序函数:

arraySort(property) {
            return function (a, b) {
                var value1 = a[property]
                var value2 = b[property]
                return value1 - value2
            }
        }

在进行添加的时候排序:originalData.sort(arraySort('order'))

sort函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。

举例:

var originalData =[{name: 'mingxin',order: 6},{name: 'wanglin',order: 1},{name: 'jiangxia',order:8},{name: 'liufang',order: 4},{name: 'wangha',order: 1},{name: 'liming',order: 7}];
function arraySort(property){
    return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if(value1 - value2>0){
            console.log(value1+"大于"+value2+"调换位置")
        }else if(value1 - value2<0){
            console.log(value1+"小于"+value2+"位置不变")
        }else{
            console.log(value1+"等于"+value2+"位置不变")
        }
        return value1 - value2
    }
};
originalData.sort(arraySort('order'))

运行结果如下:

vue小技巧:简单排序和对象排序

对于数组里面全是number

computed部分:

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
 }

methods部分

function sortNumber(a,b){
            return a-b
  }

对于一个对象 有多种类型

data部分

students:[
  {name:'jspang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]

methods部分

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));
   });
}

view部分

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

computed部分

sortStudent:function(){
     return sortByKey(this.students,'age');
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue给数组中对象排序sort函数的用法

本文链接: https://www.lsjlt.com/news/168181.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue给数组中对象排序sort函数的用法
    目录vue给数组中对象排序 sort函数vue小技巧:简单排序和对象排序对于数组里面全是number对于一个对象 有多种类型vue给数组中对象排序 sort函数 开发穿梭框的时候,需...
    99+
    2022-11-13
  • 怎么在php中使用sort函数对数组进行排序
    本篇文章为大家展示了怎么在php中使用sort函数对数组进行排序,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。php是什么语言php,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hyper...
    99+
    2023-06-14
  • PHP中怎么利用sort()函数实现数组排序
    PHP中怎么利用sort()函数实现数组排序,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一般数组中的各元素均以字符或数字表现的,所以可对数组元素进行升序排列,...
    99+
    2023-06-17
  • JavaScript中好用的数组对象排序方法分享
    目录简单的排序方法实现多重排序具有通用性的排序方法使用 Lodash 库结论在日常工作中,我们经常需要对数组对象进行排序。尤其是在处理数据可视化需求中,根据不同的数值维度进行排序是必...
    99+
    2023-05-19
    JavaScript数组对象排序方法 JavaScript数组对象排序 JavaScript排序
  • PHP中怎么用数组函数对数组进行升序排序
    这篇文章主要讲解了“PHP中怎么用数组函数对数组进行升序排序”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP中怎么用数组函数对数组进行升序排序”吧!今天我们就来看看数组排序中的升序操作,...
    99+
    2023-06-20
  • Mongodb中怎么使用sort()方法对数据进行排序
    这篇文章主要介绍Mongodb中怎么使用sort()方法对数据进行排序,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!python中使用sort()方法可以对列表排序,在编程数据库MongoDB中,排序方法也是sort...
    99+
    2023-06-14
  • javascript中数组排序与对象排序的示例分析
    这篇文章将为大家详细讲解有关javascript中数组排序与对象排序的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。javascript  数组排序与对...
    99+
    2022-10-19
  • 使用C#中的Array.Sort函数对数组进行排序
    标题:C#中使用Array.Sort函数对数组进行排序的示例正文:在C#中,数组是一种常用的数据结构,经常需要对数组进行排序操作。C#提供了Array类,其中有Sort方法可以方便地对数组进行排序。本文将演示如何使用C#中的Array.So...
    99+
    2023-11-18
    C# Array sort
  • java的list数组按数组中对象的某个属性排序
    在 Java 中,可以使用 Collections.sort() 方法和 Comparator 接口来对 List 中的对象按照对象的某个属性进行排序。以下是一个示例代码: 假设有一个 Person 类,它包含一个 name 字符串属性和一...
    99+
    2023-08-18
    java 开发语言 jvm
  • PHP中的asort()函数对数组按值进行排序
    PHP中的asort()函数对数组按值进行排序,需要具体代码示例PHP是一种广泛使用的服务器端脚本语言,它具有丰富的数组处理函数。其中,asort()函数是一个非常有用的函数,它可以按照数组的值进行排序。本文将详细介绍asort()函数的使...
    99+
    2023-11-18
    PHP 数组排序 asort()
  • 了解PHP中的rsort()函数对数组进行逆序排序
    了解PHP中的rsort()函数对数组进行逆序排序,需要具体代码示例PHP是一种非常流行的服务器端脚本语言,广泛应用于Web开发领域。在PHP中,有许多内置函数可以方便地处理数组。其中,rsort()函数可以对数组进行逆序排序。rsort(...
    99+
    2023-11-18
    PHP 逆序排序 rsort()
  • 使用PHP中的arsort()函数对数组按值进行逆序排序
    标题:PHP中使用arsort()函数对数组按值进行逆序排序文章正文:在PHP中,数组是非常常用的数据结构。有时候我们需要对数组进行排序,特别是按值进行排序。PHP提供了一系列的排序函数来满足我们的需求,其中之一就是arsort()函数。a...
    99+
    2023-11-18
    PHP arsort() 逆序排序
  • PHP中怎么使用array_multisort()函数对多维数组排序
    这篇文章给大家介绍PHP中怎么使用array_multisort()函数对多维数组排序,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。PHP函数array_multisort()的工作方式:<php $d...
    99+
    2023-06-17
  • PHP中对数组进行排序的方法
    这篇文章主要介绍PHP中对数组进行排序的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!php有什么用php是一个嵌套的缩写名称,是英文超级文本预处理语言,它的语法混合了C、Java、Perl以及php自创新的语法...
    99+
    2023-06-14
  • PHP中的ksort()函数按键名对数组进行排序
    PHP是一种服务器脚本语言,常用于Web开发中处理数据和生成动态网页。其中,ksort()函数是一个非常有用的数组排序函数。本文将介绍ksort()函数的用法,并提供具体的代码示例。一、ksort()函数的作用ksort()函数用于按照键名...
    99+
    2023-11-18
    PHP ksort 键名排序
  • PHP中的array_multisort()函数:如何对多个数组进行排序
    PHP中的array_multisort()函数:如何对多个数组进行排序,需要具体代码示例在PHP开发中,常常需要对多个数组进行排序,例如根据年龄、姓名等多个字段进行排序。PHP中提供了array_multisort()函数用于对多个数组进...
    99+
    2023-11-03
    PHP array_multisort 多个数组排序
  • 怎么用vue的$set实现给数组集合对象赋值
    这篇“怎么用vue的$set实现给数组集合对象赋值”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2022-10-19
  • 编写函数对数组中的数据进行从小到大的排序
    冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。  它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果他们的顺序(如从大到小、首字母从A到Z)错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元...
    99+
    2018-02-23
    java教程 函数 数组 排序
  • 如何使用PHP中的krsort()函数按键名对数组进行逆序排序
    如何使用PHP中的krsort()函数按键名对数组进行逆序排序,需要具体代码示例PHP中的数组是一种非常有用的数据结构,它可以存储多个值,并根据键名进行访问和操作。在PHP中,我们可以使用krsort()函数对数组按照键名进行逆序排序。本文...
    99+
    2023-11-18
    PHP 逆序排序 krsort()
  • javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)
    目录创建数组和数组检测1、使用Array构造函数 创建数组。2、使用 数组字面量法 创建数组3、检测数组数组转换队列和栈合并&拼接conca&#...
    99+
    2023-03-13
    数组合并 数组转换 数组迭代 数组排序 数组堆栈
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作