vue:js中合并对象的方法

news2024/11/29 3:43:32

目前比较常用的一共有三种

1、使用object.assign()

它可以将一个或多个对象的属性复制到目标对象中,第一个参数就是目标对象,这里举个例子:

<template>
 <div>{{data}}</div>
</template>
<script>
export default {
  data() {
    return {
		data:[]
     }
  },
  created() {
  	this.samsung()
  },
  methods: {
    samsung(){
		const obj1 = {name:'张三', age:18 }
		const obj2 = {sex: '李四', age:23 }
		const obj3 = Object.assign({},obj1,obj2);
		this.data = obj3
	}
    
  },
};
</script>

这个代码的意思就是将obj1和obj2的每个对象通过object.assign()合入第一个空对象赋值给obj3,然后obj3在赋值给data,让data在视图层显示,如果存在属性相同的情况,后面的会覆盖前面的属性

2、通过es6中的解构赋值语法

这个方法主要使用的是扩展运算符,将一个对象解构到另外一个对象中,这里举个例子:

<template>
 <div>{{data}}</div>
</template>
<script>
export default {
  data() {
    return {
		data:[]
     }
  },
  created() {
  	this.samsung()
  },
  methods: {
    samsung(){
		const obj1 = {name:'张三', age:18 }
		const obj2 = {sex: '男', age:23 }
		const obj3 = {...obj1, ...obj2}
		this.data = obj3
	}
    
  },
};
</script>

输出结果:

这个方法也是和第一个方法一样,如果两个对象有相同的属性时,后面的属性会覆盖前面的属性。

3、遍历对象获取到对象的属性赋值给新的对象

这里也是举个例子:

<template>
 <div>{{data}}</div>
</template>
<script>
export default {
  data() {
    return {
		data:[]
     }
  },
  created() {
  	this.samsung()
  },
  methods: {
    samsung(){
		const obj1 = {name:'张三', age:18 }
		const obj2 = {sex: '男', age:23 }
		const obj3 = {}
		for(const key in obj1){
			obj3[key] = obj1[key]
		}
		for(const key in obj2){
			obj3[key] = obj2[key]
		}
		this.data = obj3
	}
    
  },
};
</script>

然后把遍历到的属性手动赋值到obj3上。

总结:

大多数使用合并对象的方法主要是object.assign()、es6中的解构赋值语法、以及循环遍历,原理都是获取每个对象的属性合入新的对象中。只是方法不同。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1166267.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【t5 pytorch版源码学习】t5-pegasus-pytorch源码学习

0. 项目来源 中文生成式预训练模型&#xff0c;以mT5为基础架构和初始权重&#xff0c;通过类似PEGASUS的方式进行预训练。 bert4keras版&#xff1a;t5-pegasus pytorch版&#xff1a;t5-pegasus-pytorch 本次主要学习pytorch版的代码解读。 项目结构&#xff1a; train…

一站式IT统一运维管理平台有哪些?大家都在用哪个?

随着公司业务的加大&#xff0c;不少企业从最初的一个运维系统增加到了几个运维系统&#xff0c;每个都是独立存在的&#xff0c;因此给运维小伙伴带来了不少困扰。因此不少小伙伴在问&#xff0c;有没有一站式IT统一运维管理平台&#xff1f;有哪些&#xff1f;大家都在用哪个…

HMDD 4.0:miRNA-疾病关系数据库

拥有多项自主专利技 术和软件著作权&#xff0c;具 有丰富的数据库平台 搭建经验。 凌恩-盈飞团队 MicroRNA&#xff08;miRNA&#xff09;是一类重要的小非编码RNA&#xff0c;在疾病诊断和治疗中发挥着重要作用。人类 MicroRNA 疾病数据库 (HMDD) 为 miRNA 相关医学提供了…

zookeeper节点类型

节点类型 持久节点&#xff08;Persistent Nodes&#xff09; 这些是Zookeeper中最常见的一种节点类型&#xff0c;当创建一个持久类型节点时&#xff0c;该值会一直存在zookeeper中&#xff0c;直到被显式删除或被新值覆盖。 临时节点&#xff08;Ephemeral Nodes&#xff…

基于Qt 的可视化图片处理程序——图片的加载与保存

基于Qt 的可视化图片处理程序——图片的加载与保存 Chapter1 基于Qt 的可视化图片处理程序——图片的加载与保存图片的加载图片加载到 Label完整代码图片的保存保存图片完整代码 void MainWindow::loadPixmap() {QImage img,image;QPixmap pixmap;LoadPicPath QFileDialog::ge…

(免费领源码)java#ssm#mysql爱心捐赠物资维护系统09536-计算机毕业设计项目选题推荐

摘要 随着信息技术的快速发展&#xff0c;计算机应用已经进入成千上万的家庭。随着物资数量的增加&#xff0c;物资库存管理也存在许多问题。物资数据的处理量正在迅速增加&#xff0c;原来的手工管理模式不适合这种形式。使用计算机可以完成数据收集、处理和分析&#xff0c;减…

vue3框架全局修改样式(字体颜色以及初始化定义基础elemplent颜色)

问题1、全局修改vue管理系统框架的字体颜色&#xff08;index.scss目录下修改&#xff09; 问题2、vue3中使用elemplent-plus中的el-select组件&#xff0c;默认选中二级或三级的一个数据&#xff0c;没有显示label只显示了id 问题如下 原因是因为 这个属性为true了&#xff0…

springboot+mybatis查询两次数据库结果不一致

最近遇到个bug记录一下。情景再现&#xff1a;在一个方法里有多次查询数据库的操作&#xff0c;但查询出的数据字段会被自动翻译。&#xff08;比如1翻译成是&#xff0c;2翻译成否&#xff09;。原因&#xff1a;mybatis缓存会被代码修改。在同一个sqlsession下&#xff0c;第…

彩色颜料背景的团建活动策划PPT模板

这是一套彩色颜料背景的团建活动策划PPT模板&#xff0c;共24页&#xff1b; PPT模板封面&#xff0c;使用了彩色颜料墨迹背景图片。中间放置带有阴影效果的白色矩形文本框&#xff0c;填写团建活动策划PPT标题。界面风格充满青春朝气。 PowerPoint模板内容页&#xff0c;由2…

Rust语言和curl库编写程序

这是一个使用Rust语言和curl库编写的爬虫程序&#xff0c;用于爬取视频。 use std::env; use std::net::TcpStream; use std::io::{BufReader, BufWriter}; ​ fn main() {// 获取命令行参数let args: Vec<String> env::args().collect();let proxy_host args[1].clon…

JVM 内存和 GC 算法

文章目录 内存布局直接内存执行引擎解释器JIT 即时编译器JIT 分类AOT 静态提前编译器&#xff08;Ahead Of Time Compiler&#xff09; GC什么是垃圾为什么要GC垃圾回收行为Java GC 主要关注的区域对象的 finalization 机制GC 相关算法引用计数算法&#xff08;Reference Count…

【嵌入式开发学习】__软件工程师的关键原则-18个系统设计概念

目录 前言 01. 域名系统 (DNS) 02. 负载均衡器 03. API 网关 04. 内容交付网络 (CDN) 05. 正向代理与反向代理 06. 缓存 07. 数据分区 08. 数据库复制 09. 分布式消息系统 10. 微服务 11. 数据库 12. 前端缓存 13. 后端缓存 14. 安全性 15. 高可用性与容错性 …

阿里云双11优惠活动:新老用户99元服务器和代金券领取攻略

2023阿里云双11优惠活动开启了&#xff0c;轻量2核2G3M带宽服务器87元一年、2核4G4M带宽165元一年&#xff0c;云服务器ECS经济型e实例2核2G3M固定带宽优惠价格99元一年&#xff0c;新老用户同享&#xff0c;并且续费不涨价&#xff0c;第二年99元续费。阿里云个人和企业用户还…

JAVA技术栈的有福啦!这款IDEA插件,写完代码即可调试

国产API调试工具 Apipost 推出IDEA插件&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还可以根据已有的方法帮助您快速生成 url 和 params。Apipost Helper API 调试工具 API 管理工具 API 搜索工具。 在商店中搜索或直接点击下方链接即可下载&…

天猫商品评论API接口(评论内容|日期|买家昵称|追评内容|评论图片|评论视频..)

要获取天猫商品评论接口&#xff0c;您需要使用天猫开放平台提供的API接口。以下是一些可能有用的步骤&#xff1a; 注册并登录天猫开放平台&#xff0c;获取开发者账号。在开发者中心创建一个应用&#xff0c;获取应用的App Key和App Secret。使用天猫开放平台的API接口&…

Yolov8目标识别与实例分割——算法原理详细解析

前言 YOLO是一种基于图像全局信息进行预测并且它是一种端到端的目标检测系统&#xff0c;最初的YOLO模型由Joseph Redmon和Ali Farhadi于2015年提出&#xff0c;并随后进行了多次改进和迭代&#xff0c;产生了一系列不同版本的YOLO模型&#xff0c;如YOLOv2、YOLOv3、YOLOv4&a…

【进程控制⑦】:制作简易shell理解shell运行原理

【进程控制⑦】&#xff1a;制作简易shell&&理解shell运行原理 一.交互问题&#xff0c;获取命令行二.字串分割问题&#xff0c;解析命令行三.指令的判断四.普通命令的执行五.shell原理本质 一.交互问题&#xff0c;获取命令行 shell刚启动时就会出现一行命令行&#x…

如何建立个人百科,事半功倍

在现代社会&#xff0c;人们越来越重视个人品牌建设&#xff0c;而打造个人百科是其中重要的一环。那么&#xff0c;什么是个人百科呢&#xff1f;简单来说&#xff0c;它是一本介绍个人生平、成就和贡献的百科全书&#xff0c;其好处不言而喻。 首先&#xff0c;它可以提高个人…

vm虚拟机逆向---[GWCTF 2019]babyvm 复现【详解】

文章目录 前言题目分析CD1mov指令xor指令and其他指令 E0BF83 汇编提取编写exp 前言 好难。大家都觉得简单&#xff0c;就我觉得难是吧&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c; 题目分析 、 代码看着挺少&#xff0c;三个主要函数&#xff0c;一开始好像…

足足68个!Python函数合集请收好!

内置函数就是python给你提供的, 拿来直接用的函数&#xff0c;比如print.&#xff0c;input等。 #68个内置函数 # abs()   dict()   help()   min()   setattr() # all()   dir()   hex()   next()   sli…