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. What's new in Dubbo 3.1.5 and 3.2.0-beta.4

    在 1 月 27 日,新年伊始,Dubbo 3.1.5 和 3.2.0-beta.4 正式通过投票发布.本文将介绍发布的变化一览. Dubbo 3.1.5 版本是目前 Dubbo 3 的最新稳定版本, ...

  2. 12月13日内容总结——路由分发、名称空间、虚拟环境、视图层三板斧、JsonResponse对象、request对象获取文件、视图层FBV与CBV的源码剖析、模版层简介

    目录 一.路由分发 二.名称空间 方式1:名称空间 方式2:别名不冲突即可 三.虚拟环境 pycharm创建虚拟环境 命令行的方式创建虚拟环境: 创建虚拟环境的命令 激活与关闭虚拟环境 四.视图层之必 ...

  3. 一次代码重构 JavaScript 图连通性判定

    简介 说重构其实就是整理了代码,第一次自己手写写的很丑,然后看了书上写的,虽然和书上的思路不同但是整理后几乎一样漂亮 效果 整体代码如下 class Node { AdjNodes = new Set ...

  4. SpringCloud 消费请求Eureka调用服务提供者报错

    SpringCloud 消费请求Eureka调用服务提供者报错 springCloud 2022.0.1 springboot 3.0.2 消费程序 通过eureka集群查询服务,根据eureka中注 ...

  5. Vue32 插槽

    1 简介 是一种组件间通信的方式,让父组件可以向子组件指定位置插入 html 结构.子组件中的提供给父组件使用的一个占位标签,用<slot></slot> 表示,父组件可以在这 ...

  6. ECharts 饼图指定颜色显示

    一.通过setOption的color属性分配颜色范围 先介绍这里提到的color属性 color:调色盘颜色列表.如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色. 默认为: ['#5 ...

  7. Element ui &多选框、输入框、下拉框、开关、上传文件

    ElementUI多选框 Checkbox 使用 <el-checkbox v-model="checked">备选项</el-checkbox> < ...

  8. ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exception: Syntax error: failed at position 183 (end of query):

    报错 ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exce ...

  9. 原创ui自动化组件库-seliky

    seliky是本人单独开发的一个selenium封装库,非常好用,公司里我所在一整条业务线都用上了噢,可以通过pip来安装,下面简单介绍一下. 一. seliky特性 语法简洁,省去了原生冗长的句式. ...

  10. ps抠图小技巧

    1.背景橡皮擦工具 适合分离单一背景. 中括号键可以调整大小. 2.调整边缘抠图(也叫选择并遮住) 适合扣毛发丝. 套索工具框选出大概: 点击选择并遮住后出来一个面板: 视图选择叠加,输出设置勾上净化 ...