资讯专栏INFORMATION COLUMN

vue数组对象排序

Wuv1Up / 2122人阅读

摘要:前言最近在看的教学视频,正好学到的数组对象排序方法,在这跟大家分享一下,如有不足之处,请赐教。结果整个项目文件实例数组对象排序结果希望这篇文章对新手有用,也希望你们能和我一起分享知识,一起成长。

前言

最近在看vue的教学视频,正好学到的数组对象排序方法,在这跟大家分享一下,如有不足之处,请赐教。

普通数组的排序
先看代码:

v-for实例


  1. {{number}}

后来我想了一下,发现了其中的问题,sort方法会调用每个数组项的toString()方法,得到字符串,然后再对得到的字符串进行排序。sort()方法的参数就起到了作用,我们把这个参数叫做比较函数。
解决办法
加一个比较函数

function sortNumbers(a,b){
        return a-b;
    }

咦,怎么结果还是没出来??原来我是输出的时候忘记吧numbers换成sortNumbers。这是从小到大输出,那么从大到小呢?很简单就是return b-a,
结果如图所示:


完整代码如下:




    
    
    
    v-for
    


  

v-for实例


  1. {{number}}

数组对象的排序
如果数组项是对象,我们需要根据数组项的某个属性对数组进行排序,要怎么办呢?其实和前面的比较函数也差不多。所以我就只把部分代码分享出来了。
如何对这个数组进行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((xy)?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;
        }            
    } 
}

我觉得这个代码有点冗杂,所以我就用了条件操作符来判断输出。
结果:

整个项目文件:




    
    
    
    v-for
    


  

v-for实例


  1. {{number}}

  • {{index+1}}:{{student.name}}-{{student.age}}

结果:


希望这篇文章对新手有用,也希望你们能和我一起分享知识,一起成长。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95539.html

相关文章

  • vue里面的v-for列表循环

    摘要:取到里面的偶数位的值在计算属性不适用的情况下例如,在嵌套循环中你可以使用一个方法一段取值范围的也可以取整数。 列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。 {{item.text}} data:{ items:[ ...

    verano 评论0 收藏0
  • Vue.js-函数化组件

    摘要:用函数化组件展示一个根据数据智能选择不同组件的场景函数化组件根据数据选择组件函数化组件根据数据选择组件函数化组件主要适用于以下两个场景程序化地在多个组件中选择一个。 学习笔记:函数化组件 函数化组件 Vue提供了一个functional的布尔值选项,设置为true可以使组件无状态和无实例,也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染,因为函数化...

    yearsj 评论0 收藏0
  • 函数化组件

    摘要:用函数化组件展示一个根据数据智能选择不同组件的场景函数化组件根据数据选择组件函数化组件根据数据选择组件函数化组件主要适用于以下两个场景程序化地在多个组件中选择一个。 函数化组件 Vue提供了一个functional的布尔值选项,设置为true可以使组件无状态和无实例,也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染,因为函数化组件只是一个函数,渲染开...

    MingjunYang 评论0 收藏0
  • Vue.js-内置指令

    摘要:如果一次判断的是多个元素,可以在内置的元素上使用条件指令,最终渲染的结果不会包含该元素。列表渲染也支持用代替作为分隔符,它更接近迭代器的语法的表达式支持一个可选参数作为当前项的索引。分隔符前的语句使用括号,第二项就是当前项的索引。 学习笔记:内置指令 内置指令 基本指令 v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的d...

    zzbo 评论0 收藏0
  • Vue 的条件渲染和列表渲染

    摘要:条件渲染上一篇与绑定下一篇的事件处理方法在中配合渲染一整组在使用控制元素的时候,我们需要将它添加到这个元素上去。最终的渲染结果不会包含元素。渲染如下列表渲染使用把一个数组对应为一组元素我们用指令根据一组数组的选项列表进行渲染。 条件渲染 上一篇:Class 与 Style 绑定:https://segmentfault.com/a/11...下一篇:Vue的事件处理方法:https:/...

    go4it 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<