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

目录
  • vue给数组中对象排序 sort函数
  • vue小技巧：简单排序和对象排序
    • 对于数组里面全是number
    • 对于一个对象 有多种类型

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 简单了解vue.js数组的常用操作

    数组的相关方法如下 1,锁定数组的长度(只读模式)[ Array.join() ] var a = [1,2,3] //定义一个数组<br> Object.defineProperty(a,"length",{ writable:false }) //将a数组的长度属性设为只读<br> a.length = 0 //将a的长度改为0<br> console.log(a.length); //打印a数组的长度,还是3 2.将数组合并成字符串(返回字符串

  • Vue.js实现可排序的表格组件功能示例

    Vue.js实现可排序的表格组件功能示例

    本文实例讲述了Vue.js实现可排序的表格组件功能.分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序:data 表示数据. html: <div id="app" v-cloak> <v-table :data="data" :columns

  • vue 根据数组中某一项的值进行排序的方法

    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] },compute

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

    目录 vue给数组中对象排序 sort函数 vue小技巧:简单排序和对象排序 对于数组里面全是number 对于一个对象 有多种类型 vue给数组中对象排序 sort函数 开发穿梭框的时候,需要将左侧选中的数据排序后添加到右侧 先看代码吧,后面解释 originalData为左侧选择的数据: var originalData =[{name: 'Tom'},{name: 'Andy'},{name: 'Marry'},{name: 'Tina'}]; 先给每个对象添加一个排序order: for

  • 详解Vue改变数组中对象的属性不重新渲染View的解决方案

    在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图. 受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它. 但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true);

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • 数组Array的排序sort方法

    JavaScript中的Array对象有自己的排序方法sort(),对数组中的数据项进行排序,但是有时候排序结果不尽如人意,比如 var arr = [12, 1, 2, 21, 3]; arr.sort(); alert(arr); 得到的结果为 1,12,2,21,3 这是为什么呢?因为JavaScript中的排序默认按照ascii字符代码进行排序,也就是说,数字也是按照它们的字符串形式排序的. var strArr = ['a', '2', 'a2', '2a', 'b', '3']; a

  • 浅析C/C++中sort函数的用法

    sort是STL中提供的算法,头文件为#include<algorithm>以及using namespace std; 函数原型如下: template <class RandomAccessIterator> void sort ( RandomAccessIterator first, RandomAccessIterator last ); template <class RandomAccessIterator, class Compare> void sor

  • java实现List中对象排序的方法

    本文实例讲述了java实现List中对象排序的方法.分享给大家供大家参考,具体如下: package com.test; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.List; public class NewsManager { /** * @param args */ public static void main(String[

  • vue更改数组中的值实例代码详解

    根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n

  • C#中Arraylist的sort函数用法实例分析

    本文实例讲述了C#中Arraylist的sort函数用法.分享给大家供大家参考.具体如下: ArrayList的sort函数有几种比较常用的重载: 1.不带参数 2.带一个参数 public virtual void Sort( IComparer comparer ) 参数 comparer 类型:System.Collections.IComparer 比较元素时要使用的 IComparer 实现. - 或 - null 引用(Visual Basic 中为 Nothing)将使用每个元数的

  • JS实现查找数组中对象的属性值是否存在示例

    JS实现查找数组中对象的属性值是否存在示例

    本文实例讲述了JS实现查找数组中对象的属性值是否存在.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var studentsArray = [ { "

  • JS数组中对象去重操作示例

    JS数组中对象去重操作示例

    本文实例讲述了JS数组中对象去重操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js数组中对象去重</title> </head> <body> <script> var tmp = [ { "

随机推荐