对象键值对内容映射
对象映射:
数据字段的英文名映射为更易理解的中文标签进行展示。即数据字段英文名 -> 中文描述。
作用:
- 提高代码的可读性。
- 支持数据字段与展示内容的解耦,方便修改展示语言或样式,而无需改动数据源。
映射特点:
- 映射的灵活性
// 只需更改 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容器中的比较函数对象可以是:函数指针、仿函数(函…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
uniapp 实现腾讯云IM群文件上传下载功能
UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中,群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS,在uniapp中实现: 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...
jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里,Bessie 有一个烤箱,可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
FOPLP vs CoWoS
以下是 FOPLP(Fan-out panel-level packaging 扇出型面板级封装)与 CoWoS(Chip on Wafer on Substrate)两种先进封装技术的详细对比分析,涵盖技术原理、性能、成本、应用场景及市场趋势等维度: 一、技术原…...
CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?
在现代前端开发中,Utility-First (功能优先) CSS 框架已经成为主流。其中,Tailwind CSS 无疑是市场的领导者和标杆。然而,一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...
