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. inline的作用

    1:inline可以跳过调用,直接引用,类似与直接将函数中的代码拿到当前函数中一样 2:在.h中函数重复的时候可以用inline来解决冲突问题

  2. 【Django drf】视图层大总结 ViewSetMixin源码分析 路由系统 action装饰器

    目录 九个视图子类 视图集 继承ModelViewSet类写五个接口 继承 ReadOnlyModelView编写2个只读接口 ViewSetMixin源码分析 查找as_view方法 setattr ...

  3. v-html渲染页面的时候 css样式无效

    感谢: https://www.cnblogs.com/niuxiaoxian/p/9443873.html 当我们用v-html渲染页面的时候会发现样式并没有添加上,如下 复制代码 <temp ...

  4. 线程基础知识 03 synchronized锁(对象在内存的布局和加上锁后对象在内存中的变化)

    1 线程不安全演示 public class ThreadAndLockTest1 { private static int a = 0; public static void main(String ...

  5. 2021级《JAVA语言程序设计》上机考试试题3

    ok,现在是学生的界面实现,因为代码上篇都给出来了,那个是打分卡里面要求全了的,然后service,servlet不全,嗯,刚刚忘说了,没写完,就写了那么多. 先注册: 代码如下: <%@ pa ...

  6. JavaScript字符串的常用方法

    一.操作方法 我们也可将字符串常用的操作方法归纳为增.删.改.查,需要知道字符串的特点是一旦创建了,就不可变 增 这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作 除了常用+以及 ...

  7. 大规模 IoT 边缘容器集群管理的几种架构-5-总结

    前文回顾 大规模 IoT 边缘容器集群管理的几种架构-0-边缘容器及架构简介 大规模 IoT 边缘容器集群管理的几种架构-1-Rancher+K3s 大规模 IoT 边缘容器集群管理的几种架构-2-H ...

  8. .Net 获取URL中指定参数值

    有时候我们调用第三方接口,返回的并不是完整的链接带参数,而我们只需要获取指定的一些参数 例如:code=200&msg=success&timestamp=1657539&no ...

  9. Cesium之基础控件

    1. 引言 Cesium是一款三维地球和地图可视化开源JavaScript库,使用WebGL来进行硬件加速图形,使用时不需要任何插件支持,基于Apache2.0许可的开源程序,可以免费用于商业和非商业 ...

  10. net core 添加cors,解决跨域问题

    ConfigureServices //允许跨域 services.AddCors(options => { options.AddPolicy("any", builder ...