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

 更新时间:2022年09月22日 11:06:57   作者:前端程序猿之路  
这篇文章主要介绍了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');
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    vue中js判断长时间不操作界面自动退出登录(推荐)

    这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    这篇文章主要介绍了Vue.js实现拖放效果的实例的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 浅谈Vue的加载顺序探讨

    浅谈Vue的加载顺序探讨

    本篇文章主要介绍了Vue的加载顺序探讨,详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 解决VUE-Router 同一页面第二次进入不刷新的问题

    解决VUE-Router 同一页面第二次进入不刷新的问题

    这篇文章主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目打包后请求地址错误/打包后跨域操作

    这篇文章主要介绍了vue项目打包后请求地址错误/打包后跨域操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue 虚拟dom的patch源码分析

    vue 虚拟dom的patch源码分析

    这篇文章主要介绍了vue 虚拟dom的patch源码分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue如何为GET或POST请求设置请求头

    Vue如何为GET或POST请求设置请求头

    这篇文章主要介绍了Vue如何为GET或POST请求设置请求头,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue无限滑动周选择日期的组件的示例代码

    Vue无限滑动周选择日期的组件的示例代码

    这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 关于Vue的URL转跳与参数传递方式

    关于Vue的URL转跳与参数传递方式

    这篇文章主要介绍了关于Vue的URL转跳与参数传递方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue中前端与后端如何实现交互

    Vue中前端与后端如何实现交互

    这篇文章主要介绍了Vue中前端与后端如何实现交互,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论