当前位置: 首页 > news >正文

对象键值对内容映射

对象映射:

数据字段的英文名映射为更易理解的中文标签进行展示。即数据字段英文名 -> 中文描述

作用:

  • 提高代码的可读性。
  • 支持数据字段与展示内容的解耦,方便修改展示语言或样式,而无需改动数据源

映射特点:

  1. 映射的灵活性
    // 只需更改 fieldMapping 的内容即可修改字段的展示标签。
    const fieldMapping = {name: "Full Name",age: "Years Old",email: "Email Address",phone: "Phone Number",
    };
    

  2. 适应数据模型的变化
    // 数据模型发生变化时,映射机制使组件更易于扩展。例如新增字段 address
    const fieldMapping = {...fieldMapping,address: "地址",
    };
    

  3. 支持复杂数据结构
    // 如果字段是嵌套对象,可以用自定义函数处理映射
    const userData = {name: "张三",address: { city: "北京", street: "朝阳路" },
    };const fieldMapping = {name: "姓名","address.city": "城市","address.street": "街道",
    };const getNestedValue = (obj, key) =>key.split('.').reduce((o, k) => (o ? o[k] : 'N/A'), obj);<template v-for="(label, field) in fieldMapping"><div class="info-item"><strong>{{ label }}:</strong> {{ getNestedValue(userData, field) }}</div>
    </template>
    

  4. 数据与视图解耦
    // 数据的命名和存储结构独立于视图,视图仅关心展示格式。
    // 例如:
    // 数据中使用英文命名 email,方便开发和 API 兼容。
    // 界面展示为 "电子邮箱",方便用户阅读。
    

应用:

组件封装:

<template><div class="user-info" v-if="userData"><template v-for="(label, field) in fieldMapping" :key="field"><div class="info-item"><!-- 在组件中,使用了 userData[field] || 'N/A' 来处理可能的字段缺失问题:
如果 userData 中某字段不存在,渲染 "N/A",避免页面显示 undefined 或报错。
这种处理方式是简单的数据保护策略。--><strong>{{ label }}:</strong> {{ userData[field] || 'N/A' }}</div></template></div><div v-else>Loading...</div> <!-- 显示 loading,直到 data 准备好 -->
</template><script setup>
const props = defineProps({userData: {type: Object,required: true,default: () => ({name: '张三',age: 28,email: 'zhangsan@example.com',phone: '1234567890'})}
})
// fieldMapping 的键是 userData 对象的字段名(如 name、age),值是字段对应的中文标签(如 "姓名"、"年龄")。
const fieldMapping = {name: "姓名",age: "年龄",email: "电子邮箱",phone: "联系电话",
};
</script><style scoped>
.user-info {padding: 20px;background-color: #f9f9f9;border-radius: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}.info-item {margin-bottom: 10px;font-size: 16px;
}strong {color: #333;
}
</style>

组件使用:

<template><Change :userData="list"></Change>
</template><script setup>
import Change from '../components/change.vue'
const list = {name: '张三',age: 28,email: 'zhangsan@example.com',phone: '1234567890'
}
</script><style></style>

效果:

相关文章:

对象键值对内容映射

对象映射&#xff1a; 数据字段的英文名映射为更易理解的中文标签进行展示。即数据字段英文名 -> 中文描述。 作用&#xff1a; 提高代码的可读性。支持数据字段与展示内容的解耦&#xff0c;方便修改展示语言或样式&#xff0c;而无需改动数据源。 映射特点&#xff1a…...

《生成式 AI》课程 第7講:大型語言模型修練史 — 第二階段: 名師指點,發揮潛力 (兼談對 ChatGPT 做逆向工程與 LLaMA 時代的開始)

资料来自李宏毅老师《生成式 AI》课程&#xff0c;如有侵权请通知下线 Introduction to Generative AI 2024 Springhttps://speech.ee.ntu.edu.tw/~hylee/genai/2024-spring.php 摘要 这一系列的作业是为 2024 年春季的《生成式 AI》课程设计的&#xff0c;共包含十个作业。…...

学习C#中的反射

在C#编程中&#xff0c;反射&#xff08;Reflection&#xff09;是一项强大且灵活的技术&#xff0c;它允许程序在运行时动态地获取类型信息、创建对象实例、调用方法、访问字段和属性等。这种机制极大地增强了程序的动态性和可扩展性&#xff0c;使得开发者能够在编译时未知的…...

学习使用jquery实现在指定div前面增加内容

学习使用jquery实现在指定div前面增加内容 设计思路代码示例 设计思路 选择要添加内容的指定元素‌&#xff1a; 使用jQuery选择器来选择你希望在其前添加内容的元素。例如&#xff0c;如果你有一个 元素&#xff0c;其ID为qipa250&#xff0c;你可以使用$(‘#qipa250’)来选择…...

react项目初始化配置步骤

1.npx create-react-app 项目名称 vue项目同理 2.去编辑器市场安装所需插件&#xff0c;例如ESlint以及Prettier-Code formatter formatiing-toggle 3.在项目中安装 ESLint 和 Prettier 及相关插件&#xff1a; 3.1&#xff1a; npm install --save-dev eslint prettier 3.2…...

vue使用百度富文本编辑器

1、安装 npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装 2、下载UEditor 官网&#xff1a;ueditor:rich text 富文本编辑器 - GitCode 整理好的&#xff1a;vue-ueditor: 百度编辑器JSP版 因为官方的我没用来&#xff0c;所以我自己找的另外的包 …...

异常处理(6)自定义异常

异常处理&#xff08;6&#xff09;自定义异常类 1、自定义异常要求&#xff1a; &#xff08;1&#xff09;要继承一个异常类型 自定义一个编译时异常类型&#xff1a;自定义类继承java.lang.Exception。 自定义一个运行时异常类型&#xff1a;自定义类继承java.lang.Runtim…...

微软正在测试 Windows 11 对第三方密钥的支持

微软目前正在测试 WebAuthn API 更新&#xff0c;该更新增加了对使用第三方密钥提供商进行 Windows 11 无密码身份验证的支持。 密钥使用生物特征认证&#xff0c;例如指纹和面部识别&#xff0c;提供比传统密码更安全、更方便的替代方案&#xff0c;从而显著降低数据泄露风险…...

时间的礼物:如何珍视每一刻

《时间的礼物&#xff1a;如何珍视每一刻》 夫时间者&#xff0c;宇宙之精髓&#xff0c;生命之经纬&#xff0c;悄无声息而流转不息&#xff0c;如织锦之细线&#xff0c;串联古今&#xff0c;贯穿万物。 人生短暂&#xff0c;犹如白驹过隙&#xff0c;倏忽而逝&#xff0c;…...

初级 Python 数据脱敏技术及应用

文章目录 引言&#xff1a;为什么需要数据脱敏&#xff1f;常见的数据脱敏技术字符替换加密脱敏数据伪造组合策略 数据脱敏的合规性和伦理脱敏方案选择脱敏操作的性能优化结论 引言&#xff1a;为什么需要数据脱敏&#xff1f; 随着数据隐私问题越来越受到重视&#xff0c;数据…...

1063 Set Similarity (25)

Given two sets of integers, the similarity of the sets is defined to be Nc​/Nt​100%, where Nc​ is the number of distinct common numbers shared by the two sets, and Nt​ is the total number of distinct numbers in the two sets. Your job is to calculate th…...

Web登录页面设计

记录第一个前端界面&#xff0c;暑假期间写的&#xff0c;用了Lottie动画和canvas标签做动画&#xff0c;登录和注册也连接了数据库。 图片是从网上找的&#xff0c;如有侵权私信我删除&#xff0c;谢谢啦~...

【大数据学习 | Spark】Spark on hive与 hive on Spark的区别

1. Spark on hive Spark on hive指的是使用Hive的元数据&#xff08;Metastore&#xff09;和SQL解析器(HiveQL)。这种方式下&#xff0c;spark可以读取和写入hive表&#xff0c;利用hive的元数据信息来进行表结构的定义和管理。 具体特点为&#xff1a; 1.1 元数据共享 sp…...

软件测试丨Pytest 第三方插件与 Hook 函数

Pytest不仅是一个用于编写简单和复杂测试的框架&#xff0c;还有大量的第三方插件以及灵活的Hook函数供我们使用&#xff0c;这些功能大大增强了其在软件测试中的应用。通过使用Pytest&#xff0c;测试开发变得简便、安全、高效&#xff0c;同时也能帮助我们更快地修复Bug&…...

Python学习35天

# 定义父类 class Computer: CPUNone MemoryNone diskNone def __init__(self,CPU,Memory,disk): self.disk disk self.Memory Memory self.CPU CPU def get_details(self): return f"CPU:{self.CPU}\tdisk:{self.disk}\t…...

IO基础(字符集与字符流)

在字节流中&#xff0c;文件中的中文显示的是乱码。 在计算机存储体系中&#xff0c;以字节为最小存储单位&#xff0c;一个英文占一字节。 字符集类型 ASCII字符集&#xff0c;又叫编码表&#xff0c;编码表中有128个数据&#xff0c;其中大小写字母、符号、数字等。GB2312…...

LLM应用-prompt提示:RAG query重写、相似query生成 加强检索准确率

参考&#xff1a; https://zhuanlan.zhihu.com/p/719510286 1、query重写 你是一名AI助手&#xff0c;负责在RAG&#xff08;知识库&#xff09;系统中通过重构用户查询来提高检索效果。根据原始查询&#xff0c;将其重写得更具体、详细&#xff0c;以便更有可能检索到相关信…...

[python脚本处理文件入门]-17.Python如何操作Excel文件的读写

哈喽,大家好,我是木头左! 在Python中,处理Excel文件最常用的库之一是xlrd,它用于读取Excel文件。而当需要创建或写入Excel文件时,xlwt库则是一个不错的选择。这两个库虽然功能强大,但使用起来也非常简单直观。 安装与导入 确保你已经安装了这两个库。如果没有安装,可以…...

深度理解进程的概念(Linux)

目录 一、冯诺依曼体系 二、操作系统(OS) 设计操作系统的目的 核心功能 系统调用 三、进程的概念与基本操作 简介 查看进程 通过系统调用获取进程标识符 通过系统调用创建进程——fork() 四、进程的状态 操作系统中的运行、阻塞和挂起 理解linux内核链表 Linux的进…...

【C++】STL容器中的比较函数对象

目录 set、map容器 priority_queue容器 在STL中涉及到以某种规则排序的容器都需要比较函数对象&#xff0c;比如&#xff1a;set、map、priority_queue这些容器内部都是依赖比较函数对象以某种规则存储数据的。STL容器中的比较函数对象可以是&#xff1a;函数指针、仿函数(函…...

深度学习基础02_损失函数BP算法(上)

目录 一、损失函数 1、线性回归损失函数 1.MAE损失 2.MSE损失 3.SmoothL1Loss 2、多分类损失函数--CrossEntropyLoss 3、二分类损失函数--BCELoss 4、总结 二、BP算法 1、前向传播 1.输入层(Input Layer)到隐藏层(Hidden Layer) 2.隐藏层(Hidden Layer)到输出层(Ou…...

6.584-Lab4A

6.584-LabA HomeworkReference CodeReference Blog 通过作业提供的概览图可以看出整个系统的组成&#xff1a;用户 Clerk 会发出命令&#xff08;Get、Put、Append&#xff09;到每个 Service&#xff0c;每个 Service 接收到命令后向下传递到 RaftCode 层&#xff0c;由 RaftC…...

语义版本控制

注意&#xff1a; 本文内容于 2024-11-27 22:25:05 创建&#xff0c;可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容&#xff0c;请访问原文地址&#xff1a;语义版本控制。感谢您的关注与支持&#xff01; 由于自己平时喜欢写点小玩意&#xff0c;自然而…...

深入理解HTML基本结构:构建现代网页的基石

深入理解HTML基本结构&#xff1a;构建现代网页的基石 在数字时代&#xff0c;HTML&#xff08;超文本标记语言&#xff09;是构建和设计网页的基础。了解HTML的基本结构对于任何希望掌握网页开发的人来说至关重要。本文将详细介绍HTML文件的基本骨架&#xff0c;包括其核心标…...

一体化数据安全平台uDSP 入选【年度创新安全产品 TOP10】榜单

近日&#xff0c;由 FreeBuf 主办的 FCIS 2024 网络安全创新大会在上海隆重举行。大会现场揭晓了第十届 WitAwards 中国网络安全行业年度评选获奖名单&#xff0c;该评选自 2015 年举办以来一直饱受赞誉&#xff0c;备受关注&#xff0c;评选旨在以最专业的角度和最公正的态度&…...

【机器学习】机器学习的基本分类-监督学习(Supervised Learning)

监督学习是一种通过已有的输入数据&#xff08;特征&#xff09;和目标输出&#xff08;标签&#xff09;对模型进行训练的机器学习方法&#xff0c;旨在学到一个函数&#xff0c;将输入映射到正确的输出。 1. 监督学习概述 监督学习需要&#xff1a; 输入数据&#xff08;特…...

Oracle之提高PLSQL的执行性能

目录 1、SQL解析详解 2、演示示例 3、启用Oracle跟踪事件 4、查看改造后SQL性能对比结果 更多技术干货,关注个人博客吧 1、SQL解析详解 SQL解析是数据块处理SQL语句不可缺少的步骤,是在解析器中执行的。将SQL转换成数据库可以执行的低级指令。 SQL解析分为硬解析和软…...

[VSCode] vscode下载安装及安装中文插件详解(附下载文件)

前言 vscode 链接&#xff1a;https://pan.quark.cn/s/3acbb8aed758 提取码&#xff1a;dSyt VSCode 是一款由微软开发且跨平台的免费源代码编辑器&#xff1b;该软件支持语法高亮、代码自动补全、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和Git版本控制系统。 …...

PHP中类名加双冒号的作用

在 PHP 中&#xff0c;类名加双冒号&#xff08;::&#xff09; 是一种用于访问类的静态成员和常量的语法。它也可以用来调用类的静态方法和访问 PHP 的类相关关键词&#xff08;如 parent、self 和 static&#xff09;。以下是详细的解释和用法。 1. 用途概述 :: 被称为作用域…...

前端编程训练 异步编程篇 请求接口 vue与react中的异步

文章目录 前言代码执行顺序的几个关键点接口请求vue与react中的异步vue中的异步react的state修改异步 前言 本文是B站三十的前端课的笔记前端编程训练,异步编程篇 代码执行顺序的几个关键点 我们可以理解为代码就是一行一行&#xff0c;一句一句是执行&#xff08;定义变量&…...

香河网站建设/网站软件下载

转载于:https://www.cnblogs.com/panda88/p/6006372.html...

php语言的网站建设/全网营销系统怎么样

eas连接服务器超时 内容精选换一换本章节以Linux操作系统为例&#xff0c;指导您通过弹性云服务器内网方式连接GaussDB(for Redis)实例。使用内网连接GaussDB(for Redis)实例可通过如下两种方式实现&#xff1a;方式一&#xff1a;通过连接各节点的内网IP访问数据库实例。方式二…...

怎么删除网站里的死链接/免费建站免费推广的网站

网页开发最最重要最最基本的就是富文本编辑器和文件上传&#xff0c;开始我迷信百度的ueditor和webupload&#xff0c;结果总是别扭&#xff0c;看来不能迷信BAT啊。富文本用了froala&#xff0c;文件上传早点用bootstrap fileinput那多炫啊。 参考网上的文章&#xff0c;走了…...

百度站长平台验证网站/今天的新闻主要内容

centos7 配置vlancentos7在网上找到的方法都是使用vconfig去配置&#xff0c;但偏偏centos7没有vconfig这个包&#xff0c;用yum安装也搜不到这个包&#xff0c;如果用centos6的包又太过麻烦&#xff0c;现提供已下配置方法注&#xff1a;此方法通过安装centos7时&#xff0c;配…...

医联媒体网站建设/沧州网络推广公司

7.1 导入敏捷项目管理的步骤 1.导入敏捷的步骤 (1).培训 (2).教练与引导 (3).内化 2.敏捷混合型模式 7.2 项目启动与敏捷合同 1.敏捷项目启动 2.敏捷签约模式 在传统项目管理框架下的委外项目要采用敏捷&#xff0c;必须要将项目进行方式和所要采用的敏捷过程与实践&#xff…...

企业网站网络营销案例分析/网络营销的内容主要有哪些

女生一般不会研究笔记本电脑CPU是什么&#xff1f;显卡是什么&#xff1f;性价比足够不足够&#xff1f;以本我多年推荐(bei)经(zhe)验(mo)来看&#xff0c;女生一般只想要笔记本电脑好看。。。以直男来看大多数女生应该会喜欢精致且外观漂亮的轻薄本&#xff0c;所以本篇回答会…...