对象键值对内容映射
对象映射:
数据字段的英文名映射为更易理解的中文标签进行展示。即数据字段英文名 -> 中文描述。
作用:
- 提高代码的可读性。
- 支持数据字段与展示内容的解耦,方便修改展示语言或样式,而无需改动数据源。
映射特点:
- 映射的灵活性
// 只需更改 fieldMapping 的内容即可修改字段的展示标签。 const fieldMapping = {name: "Full Name",age: "Years Old",email: "Email Address",phone: "Phone Number", }; - 适应数据模型的变化
// 数据模型发生变化时,映射机制使组件更易于扩展。例如新增字段 address const fieldMapping = {...fieldMapping,address: "地址", }; - 支持复杂数据结构
// 如果字段是嵌套对象,可以用自定义函数处理映射 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> - 数据与视图解耦
// 数据的命名和存储结构独立于视图,视图仅关心展示格式。 // 例如: // 数据中使用英文命名 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>
效果:

相关文章:
对象键值对内容映射
对象映射: 数据字段的英文名映射为更易理解的中文标签进行展示。即数据字段英文名 -> 中文描述。 作用: 提高代码的可读性。支持数据字段与展示内容的解耦,方便修改展示语言或样式,而无需改动数据源。 映射特点:…...
《生成式 AI》课程 第7講:大型語言模型修練史 — 第二階段: 名師指點,發揮潛力 (兼談對 ChatGPT 做逆向工程與 LLaMA 時代的開始)
资料来自李宏毅老师《生成式 AI》课程,如有侵权请通知下线 Introduction to Generative AI 2024 Springhttps://speech.ee.ntu.edu.tw/~hylee/genai/2024-spring.php 摘要 这一系列的作业是为 2024 年春季的《生成式 AI》课程设计的,共包含十个作业。…...
学习C#中的反射
在C#编程中,反射(Reflection)是一项强大且灵活的技术,它允许程序在运行时动态地获取类型信息、创建对象实例、调用方法、访问字段和属性等。这种机制极大地增强了程序的动态性和可扩展性,使得开发者能够在编译时未知的…...
学习使用jquery实现在指定div前面增加内容
学习使用jquery实现在指定div前面增加内容 设计思路代码示例 设计思路 选择要添加内容的指定元素: 使用jQuery选择器来选择你希望在其前添加内容的元素。例如,如果你有一个 元素,其ID为qipa250,你可以使用$(‘#qipa250’)来选择…...
react项目初始化配置步骤
1.npx create-react-app 项目名称 vue项目同理 2.去编辑器市场安装所需插件,例如ESlint以及Prettier-Code formatter formatiing-toggle 3.在项目中安装 ESLint 和 Prettier 及相关插件: 3.1: npm install --save-dev eslint prettier 3.2…...
vue使用百度富文本编辑器
1、安装 npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装 2、下载UEditor 官网:ueditor:rich text 富文本编辑器 - GitCode 整理好的:vue-ueditor: 百度编辑器JSP版 因为官方的我没用来,所以我自己找的另外的包 …...
异常处理(6)自定义异常
异常处理(6)自定义异常类 1、自定义异常要求: (1)要继承一个异常类型 自定义一个编译时异常类型:自定义类继承java.lang.Exception。 自定义一个运行时异常类型:自定义类继承java.lang.Runtim…...
微软正在测试 Windows 11 对第三方密钥的支持
微软目前正在测试 WebAuthn API 更新,该更新增加了对使用第三方密钥提供商进行 Windows 11 无密码身份验证的支持。 密钥使用生物特征认证,例如指纹和面部识别,提供比传统密码更安全、更方便的替代方案,从而显著降低数据泄露风险…...
时间的礼物:如何珍视每一刻
《时间的礼物:如何珍视每一刻》 夫时间者,宇宙之精髓,生命之经纬,悄无声息而流转不息,如织锦之细线,串联古今,贯穿万物。 人生短暂,犹如白驹过隙,倏忽而逝,…...
初级 Python 数据脱敏技术及应用
文章目录 引言:为什么需要数据脱敏?常见的数据脱敏技术字符替换加密脱敏数据伪造组合策略 数据脱敏的合规性和伦理脱敏方案选择脱敏操作的性能优化结论 引言:为什么需要数据脱敏? 随着数据隐私问题越来越受到重视,数据…...
1063 Set Similarity (25)
Given two sets of integers, the similarity of the sets is defined to be Nc/Nt100%, 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登录页面设计
记录第一个前端界面,暑假期间写的,用了Lottie动画和canvas标签做动画,登录和注册也连接了数据库。 图片是从网上找的,如有侵权私信我删除,谢谢啦~...
【大数据学习 | Spark】Spark on hive与 hive on Spark的区别
1. Spark on hive Spark on hive指的是使用Hive的元数据(Metastore)和SQL解析器(HiveQL)。这种方式下,spark可以读取和写入hive表,利用hive的元数据信息来进行表结构的定义和管理。 具体特点为: 1.1 元数据共享 sp…...
软件测试丨Pytest 第三方插件与 Hook 函数
Pytest不仅是一个用于编写简单和复杂测试的框架,还有大量的第三方插件以及灵活的Hook函数供我们使用,这些功能大大增强了其在软件测试中的应用。通过使用Pytest,测试开发变得简便、安全、高效,同时也能帮助我们更快地修复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基础(字符集与字符流)
在字节流中,文件中的中文显示的是乱码。 在计算机存储体系中,以字节为最小存储单位,一个英文占一字节。 字符集类型 ASCII字符集,又叫编码表,编码表中有128个数据,其中大小写字母、符号、数字等。GB2312…...
LLM应用-prompt提示:RAG query重写、相似query生成 加强检索准确率
参考: https://zhuanlan.zhihu.com/p/719510286 1、query重写 你是一名AI助手,负责在RAG(知识库)系统中通过重构用户查询来提高检索效果。根据原始查询,将其重写得更具体、详细,以便更有可能检索到相关信…...
[python脚本处理文件入门]-17.Python如何操作Excel文件的读写
哈喽,大家好,我是木头左! 在Python中,处理Excel文件最常用的库之一是xlrd,它用于读取Excel文件。而当需要创建或写入Excel文件时,xlwt库则是一个不错的选择。这两个库虽然功能强大,但使用起来也非常简单直观。 安装与导入 确保你已经安装了这两个库。如果没有安装,可以…...
深度理解进程的概念(Linux)
目录 一、冯诺依曼体系 二、操作系统(OS) 设计操作系统的目的 核心功能 系统调用 三、进程的概念与基本操作 简介 查看进程 通过系统调用获取进程标识符 通过系统调用创建进程——fork() 四、进程的状态 操作系统中的运行、阻塞和挂起 理解linux内核链表 Linux的进…...
【C++】STL容器中的比较函数对象
目录 set、map容器 priority_queue容器 在STL中涉及到以某种规则排序的容器都需要比较函数对象,比如:set、map、priority_queue这些容器内部都是依赖比较函数对象以某种规则存储数据的。STL容器中的比较函数对象可以是:函数指针、仿函数(函…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
