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. 单细胞转录组实战01: CellRanger7定量

    安装CellRanger cd ~/APP wget -O cellranger-7.1.0.tar.xz "https://cf.10xgenomics.com/releases/cell ...

  2. 工具-使用org.openjdk.jol查看对象在内存中的布局

    1 添加依赖 <dependency> <groupId>org.openjdk.jol</groupId> <artifactId>jol-core& ...

  3. StartAllBack使用教程

    StartAllBack简介 StartAllBack是一款Win11开始菜单增强工具,为Windows11恢复经典样式的Windows7主题风格开始菜单和任务栏,功能包括:自定义开始菜单样式和操作, ...

  4. opencv::parallel_for_使用说明

    直接上代码 #include <opencv2/opencv.hpp> #include <iostream> #include <functional> usin ...

  5. centos7设置python路径

    直接在命令行运行.py 文件: [clouder@ana53 common]$ python3 driver.py Traceback (most recent call last): File &q ...

  6. GPT接入飞书

    GPT接入飞书 在体验ChatGPT这方面,我算是晚的.使用下来,更多的是对于这种应用形式感到兴奋,而不是ChatGPT的专业能力. 得知OpenAI提供GPT3的Api接口后,我想到了将其接入团队飞 ...

  7. ACR2022的辩论:DMARDs在pre-RA中的作用

    ACR2022的辩论:DMARDs在pre-RA中的作用 2022年11月13日   亚临床RA在风湿病学实践中越来越常见:然而,目前尚不清楚如何管理这些患者,以及启动DMARD是否可以预防RA的发展 ...

  8. .Net6 Html.Action无法使用(ViewComponents)

    接触了 net core的小伙伴们 已经发现 @html.Action()方法 官方已经不提供支持了,转而使用 ViewComponents替代了,同时也增加了TagHelper. 1.如果想用以前的 ...

  9. GeoServer在Linux上源码安装、启动、发布地图服务

    1. 环境准备 笔者此次使用的Linux系统是CentOS 8 ,没错,目前已经停止维护,但就操作而言,和其他Linux发行版大同小异 目前的GeoServer版本是2.21 1.1 Git环境 yu ...

  10. Postgresql的csv日志设置

    PG的日志系统比较完善,除去系统启动时指定的日志,wal日志等外,下面主要介绍另一个详细的输出日志:csv log. 涉及到的参数文件:$PGDATA/postgresql.conf涉及的主要参数: ...