vue 数组对象深拷贝 并根据某项属性   serialNumber  排序

原始数据

 navListData: [
{
name: '企业速览',
isHot: false,
isVip: false,
serialNumber: 3,
},
{
name: '基本信息',
isHot: false,
isVip: false,
serialNumber: 1,
},
{
name: '价值分析',
isHot: false,
isVip: false,
serialNumber: 2,
}
]

 深拷贝

 this.navListDataLeft = JSON.parse(JSON.stringify(this.navListData))
// 排序方法
this.sortBykey(this.navListDataLeft,'serialNumber')

数组对象排序方法

// 排序
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
})
},

  最后拿到的数据

vue 数组对象深拷贝 并根据某项属性排序的更多相关文章

  1. vue数组对象修改触发视图更新

    直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...

  2. js 数组对象深拷贝

    js 数组对象深拷贝 结论:对象的拷贝不能采用直接赋值的方式. 背景 踩过的坑如下: formData本来是父组件传过来的,但是我不想直接用,于是我直接赋值给一个formDataCopy的对象. 但是 ...

  3. vue 数组对象取对象的属性: Cannot read property 'xxxx' of undefined

    {{ list[0].name }} list[0]没有定义 能正确打印出想要的结果,但就是报错,外面套个v-for就没错了 很费解 看到文章说是与异步有关,解决办法: <template v- ...

  4. oc字典放入到数组里,根据字典里的属性排序(重点)

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  5. js-用于检测类数组对象的函数

    //判定o是否是一个类数组对象 //字符串和函数有length属性,但是它们 //可以用typeof检测将其排除.在客户端JavaScript中,DOM文本节点 //也有length属性,需要用额外判 ...

  6. 什么是“类数组对象”,在jquer中怎样将类数组对象转换为数组对象

    类数组对象的定义: 所谓"类数组对象"就是一个常规的Object对象,如$("div")但它和数组对象非常相似:具备length属性, 并以0.1.2.3……等 ...

  7. 如何在JavaScript中手动创建类数组对象

    前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...

  8. WPF中的依赖项属性

    Form cnblogs 桂素伟 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越多. 只能跟着MSDN来学了,所以想是在这里记录下学习的过程和对知识的理解. 先从最基本的吧,依赖项属性 ...

  9. WPF中的依赖项属性(转)

    出处:https://www.cnblogs.com/axzxs2001/archive/2010/04/25/1719857.html 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越 ...

  10. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

随机推荐

  1. 【分析笔记】全志平台 gpio_wdt 驱动应用和 stack crash 解决

    使用说明 第一次遇到看门狗芯片是通过切换电平信号来喂狗,如 SGM706 芯片,之前也比较少会用到看门狗芯片.原本打算参考 sunxi-wdt.c 的框架,利用定时器自己写一个,无意中发现内核已经有 ...

  2. BIGO 如何做到夜间同时运行 2.4K 个工作流实例?

    点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler   ​ 精彩回顾 近期,BIGO 的大数据研发工程师许名勇在社 ...

  3. nginx解决vue跨域问题

    location /epayapi { proxy_pass http://127.0.0.1:7011; proxy_set_header Host $host; proxy_set_header ...

  4. .NET遍历二维数组-先行/先列哪个更快?

    上周在.NET性能优化群里面有一个很有意思的讨论,讨论的问题如下所示: 请教大佬:2D数组,用C#先遍历行再遍历列,或者先遍历列再遍历行,两种方式在性能上有区别吗? 据我所知,Julia或者pytho ...

  5. 硬件协议之i2c

    https://blog.csdn.net/ctyqy2015301200079/article/details/83830326  (此文章可能有误) 从目前来看,所有读写操作(包括ACK的读写)都 ...

  6. Spring(Spring的读取外部资源- p 命名空间)

    Spring读取外部资源 实际开发中,数据库的资源一般会单独保存起来.一般会保存到后缀为properties的文件中,方便维护和修改,如果Spring加载资源,就需要在spring.xml中读取pro ...

  7. vue3和vue2的区别

    一.Vue3介绍 Vue 新版本的理念成型于 2018 年末,当时 Vue 2 的代码库已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,但在这段时期,前端世界已经今昔非比了 在更新(和重写) ...

  8. setInterval()的使用

    setInterval() 作用  这个函数可以将一个函数每隔一段时间执行一次 参数  1.回调函数,该函数会每隔一段时间被调用一次  2.每次调用间隔的时间,单位是毫秒 返回值  返回一个Numbe ...

  9. 如何在VC++ 6.0中实现拖动指令改变执行路径?

    前文提要: 在VC6.0之后出现的VS系列开发工具都具有的调试功能:移动指针更改执行流,VC6不支持这个UI操作. 调试程序暂停时,源代码或"反汇编"窗口边距处的黄色箭头标记要运行 ...

  10. MRI病变能否预测已获临床缓解的早期RA未来放射学进展

    MRI病变能否预测已获临床缓解的早期RA未来放射学进展 Tamai M, et al. EULAR 2015. Present ID: FRI0048. 原文 译文 FRI0048 MRI BONE ...