Vue3:使用解构赋值来读取对象里的键-值对(值也是对象)

一、前言

在Vue3中,想要读取一个对象的“键—值”对(值也是一个对象),数据格式如下:

{1:{courseName: '课程1', study: '951526', visit: '3785553'}2:{courseName: '课程2', study: '181630', visit: '380830'}3:{courseName: '课程3', study: '56097', visit: '37046'}4:{courseName: '课程4', study: '8639', visit: '6843'}5:{courseName: '课程5', study: '64882', visit: '60939'}
}

二、实现

要读取上述类型的数据,可以使用entries() 方法以及解构语法来遍历对象的“键—值”对。

1、entries(obj)方法
  • 参数obj是一个对象
Object.entries(obj)
2、核心代码
// 解构赋值:读取数据
for (const [key, courseData] of Object.entries(data.value)) {// console.log(`${courseData.courseName}`);study.push(courseData.study);course.push(`${courseData.courseName}`);visit.push(`${courseData.visit}`);
}
  • 代码解析:

使用entries() 方法,通过键去读取对象的每一个值;然后根据值里面的每个键再读取子对象里面对应的内容:
在这里插入图片描述

  • 把读取到的内容分别添加到数组中,结果如下:

在这里插入图片描述

3、完整代码
<template><div></div>
</template><script>
import { ref } from "vue";
export default {setup() {const data = ref();data.value = {1: { courseName: "课程1", study: "951526", visit: "3785553" },2: { courseName: "课程2", study: "181630", visit: "380830" },3: { courseName: "课程3", study: "56097", visit: "37046" },4: { courseName: "课程4", study: "8639", visit: "6843" },5: { courseName: "课程5", study: "64882", visit: "60939" },};var course = [];var study = []; var visit = []; // 解构赋值:读取数据for (const [key, courseData] of Object.entries(data.value)) {// console.log(`${courseData.courseName}`);study.push(courseData.study);course.push(`${courseData.courseName}`);visit.push(`${courseData.visit}`);}console.log("course:", course);console.log("study:", study);console.log("visit:", visit);},
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超实用的公众号内容制作流程,小白也能轻松学会

公众号是以内容为王的平台&#xff0c;保持优质原创内容发布可以给公众号带来源源不断的流量&#xff0c;稳定输出内容&#xff0c;会获得平台的流量扶持。 很多小伙伴运营公众号都没有什么阅读量&#xff0c;一方面是公众号内容同质化越来越严重&#xff0c;另外一方面是公众…

NetSuite 收入管理模块与总账的数据一致性检查

收入管理模块是NetSuite的一个艰深功能领域&#xff0c;能够有所实践&#xff0c;知原理懂变化的实施顾问少之又少。很高兴&#xff0c;我们的财务顾问Chris在23年底经历了一次深入的NetSuite收入管理模块的实践&#xff0c;对收入管理模块与总账递延收入和收入数据的一致性检查…

2023年第三届【金铲奖】重磅发布!

出品|产业家 第三届金铲奖来了&#xff01; 在过去的一年时间里&#xff0c;我们清晰地看到&#xff0c;产业数字化的潮水更加汹涌澎湃且势不可挡&#xff0c;越来越多的企业开始寻求数字化转型&#xff0c;它们来自金融、工业、农业、医疗、能源、教育等等。 产业数字化&am…

Modern C++ std::mutex底层原理

前言 我时常有这样的疑问&#xff1a; std::mutex怎么就能保证后面的语句100%安全哪&#xff1f;CPU reordering就不会把这些语句重排到mutex前面执行&#xff1f;而且各个CPU都是有L1、L2缓存的&#xff0c;如果mutex后面要访问的的变量在这些缓存中怎么办&#xff1f; 带着…

中央处理器CPU(1)----指令周期和微程序

前言&#xff1a;由于期末复习计算机组成效率太慢所以抽时间写一下文章总结一下思路&#xff0c;理解不是很深&#xff0c;欢迎各位不吝赐教。 由于时间不是很充分&#xff0c;所以有些考点由于我们不考试&#xff0c;一笔带过了。 我这是期末复习总结&#xff0c;不是考研知识…

开源C语言库Melon:数据恢复算法

本文讲述开源C语言库Melon中的里德所罗门纠错码的使用。 关于 Melon 库&#xff0c;这是一个开源的 C 语言库&#xff0c;它具有&#xff1a;开箱即用、无第三方依赖、安装部署简单、中英文文档齐全等优势。 Github repo 简介 里德所罗门编码是一种纠错码技术&#xff0c;…

如何理解线程池中的参数设计

如何理解线程池中的参数设计 你的线程池的参数怎么配置&#xff1f;线程数量设置多少合理&#xff1f;如何确定一个线程池中的人物已经完成了为什么不建议使用java自带的Executors创建线程池线程池里面的阻塞队列设置多少合理&#xff1f; 考察&#xff1a;了解你对技术的掌握…

k8s-调度 13

调度器通过 kubernetes 的 watch 机制来发现集群中新创建且尚未被调度到 Node 上的 Pod。调度器会将发现的每一个未调度的 Pod 调度到一个合适的 Node 上来运行。 kube-scheduler 是 Kubernetes 集群的默认调度器&#xff0c;并且是集群控制面的一部分。 如果你真的希望或者有…

printk的使用与理解

文章目录 一、理清printk二、printk的使用三、printk的打印级别1、基本解释2、详细解释3、如何修改console_loglevel、default_message_loglevel、minimum_console_loglevel、default_console_loglevel的值 四、printk的输出地方五、其它 一、理清printk printk如何使用&#…

讲讲关于跨域的问题,什么是跨域?怎么办?

文章目录 什么是跨域如果非同源&#xff0c;共有三种行为受到限浏览器客户端和向服务器跨域请求的判定流程 跨域问题演示参考 以下内容为我结合他人知识进行的自我总结, 如有错误欢迎指出~ 什么是跨域 跨域就是不同的域名下的资源访问&#xff0c;会被浏览器的本地安全策略阻…

【Python学习】Python学习13-日期和时间

目录 【Python学习】Python学习13-日期和时间 前言通过time 获取时间戳时间元组获取当前时间&#xff0c;格式化时间格式化时间转换python中时间日期格式化符号获取日历Time 模块日历&#xff08;Calendar&#xff09;模块其他模块参考 文章所属专区 Python学习 前言 本章节主…

开源知识库工具推荐:低成本搭建知识库

在信息爆炸的时代&#xff0c;企业和个体对知识的存储和管理需求日益增强。开源知识库工具因其开源、免费、高效的特性&#xff0c;成为了众多组织和个人的首选。如果你正在寻找一款优秀的开源知识库工具&#xff0c;本文将为你推荐三款性能优异的产品&#xff0c;感兴趣就往下…