扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这期内容当中小编将会给大家带来有关使用vue怎么实现数组对象排序,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
成都网站建设哪家好,找创新互联建站!专注于网页设计、网站建设公司、微信开发、小程序制作、集团成都定制网页设计等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:边坡防护网等众多领域,积累了大量丰富的经验,同时也获得了客户的一致赞扬!普通数组的排序
先看代码:
v-for实例
- {{number}}
v-for实例
- {{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实例
- {{number}}
- {{index+1}}:{{student.name}}-{{student.age}}
结果:
上述就是小编为大家分享的使用vue怎么实现数组对象排序了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流