静态 vs. 动态 Prop

简介: 静态 vs. 动态 Prop
<BlogPost title="My journey with Vue" />

相应地,还有使用 v-bind 或缩写 : 来进行动态绑定的 props:

<!-- 根据一个变量的值动态传入 -->
<BlogPost :title="post.title" />
<!-- 根据一个更复杂表达式的值动态传入 -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

传递不同的值类型

在上述的两个例子中,我们只传入了字符串值,但实际上任何类型的值都可以作为 props 的值被传递。

Number
<!-- 虽然 `42` 是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :likes="42" />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :likes="post.likes" />
Boolean
<!-- 仅写上 prop 但不传值,会隐式转换为 `true` -->
<BlogPost is-published />
<!-- 虽然 `false` 是静态的值,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :is-published="false" />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :is-published="post.isPublished" />
Array
<!-- 虽然这个数组是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost :comment-ids="[234, 266, 273]" />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :comment-ids="post.commentIds" />
Object
<!-- 虽然这个对象字面量是个常量,我们还是需要使用 v-bind -->
<!-- 因为这是一个 JavaScript 表达式而不是一个字符串 -->
<BlogPost
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />
<!-- 根据一个变量的值动态传入 -->
<BlogPost :author="post.author" />

使用一个对象绑定多个 prop

如果你想要将一个对象的所有属性都当作 props 传入,你可以使用没有参数的 v-bind,即只使用 v-bind 而非 :prop-name。例如,这里有一个 post 对象:

const post = {
  id: 1,
  title: 'My Journey with Vue'
}
<BlogPost v-bind="post" />
<BlogPost :id="post.id" :title="post.title" />
相关文章
|
11月前
|
弹性计算 人工智能 Serverless
阿里云ACK One:注册集群云上节点池(CPU/GPU)自动弹性伸缩,助力企业业务高效扩展
在当今数字化时代,企业业务的快速增长对IT基础设施提出了更高要求。然而,传统IDC数据中心却在业务存在扩容慢、缩容难等问题。为此,阿里云推出ACK One注册集群架构,通过云上节点池(CPU/GPU)自动弹性伸缩等特性,为企业带来全新突破。
|
网络安全 网络虚拟化 网络架构
计算机网络实验(华为eNSP模拟器)——第二章 VRP通用路由平台介绍
计算机网络实验(华为eNSP模拟器)——第二章 VRP通用路由平台介绍
计算机网络实验(华为eNSP模拟器)——第二章 VRP通用路由平台介绍
|
1月前
|
人工智能 Cloud Native 安全
超前探展!2025 云栖大会朋友圈晒图必备
2025 云栖大会设置人工智能+、计算、前沿应用三大主题馆,围绕云计算与 AI,全景式呈现展示 AI 时代云计算最新技术形态与产品进展。在计算馆,阿里云将集中展示从芯片到平台的全栈技术能力。观众可以了解到阿里云在超大规模集群、分布式训练、异构资源管理、推理加速等方面的软件能力,也能首次接触到面向推理和智能体需求的新一代硬件。如果你也一样,关注 AI 原生应用的创新和落地~请直奔计算馆 -「云原生 AI 应用开发」特展 !
|
1月前
|
缓存 安全 C++
C盘爆满电脑卡?3个简单技巧+1个便捷工具,小白也能轻松清理
电脑使用久了,C盘常因系统文件、软件安装和临时缓存堆积而空间不足,导致运行卡顿甚至蓝屏。本文教你识别C盘“隐形垃圾”,并提供3个手动清理技巧和1个实用工具(CCleaner),轻松释放空间,提升电脑速度,延长使用寿命。定期清理C盘,让电脑始终保持流畅运行。
414 0
|
2月前
|
存储 分布式计算 调度
云计算核心技术
云计算作为IT领域的热门技术,融合网格计算与虚拟化,通过资源池和分布式存储提供高效计算与存储服务。其架构涵盖物理资源、资源池、管理中间件及SOA构建层,关键技术包括虚拟化、海量数据处理、资源调度、服务管理及云平台,旨在实现低成本、高可靠、可扩展的服务交付。
266 0
云计算核心技术
|
11月前
|
存储 缓存 关系型数据库
都说InnoDB好,那还要不要使用Memory引擎?
【11月更文挑战第16天】本文介绍了 MySQL 中 InnoDB 和 Memory 两种存储引擎的特点及适用场景。InnoDB 支持事务、外键约束,数据持久性强,适合 OLTP 场景;而 Memory 引擎数据存储于内存,读写速度快但易失,适用于临时数据或缓存。选择时需考虑性能、数据持久性、一致性和完整性需求以及应用场景的临时性和可恢复性。
266 6
|
6月前
|
人工智能 自然语言处理 JavaScript
千星计划视频号系统开发源码
千星计划是由抖音生活服务联合头部商家发起的战略项目,旨在通过视频号橱窗功能,培育具备影响力、内容力和交易力的新主播
|
8月前
|
分布式计算 Spark
【赵渝强老师】Spark RDD的依赖关系和任务阶段
Spark RDD之间的依赖关系分为窄依赖和宽依赖。窄依赖指父RDD的每个分区最多被一个子RDD分区使用,如map、filter操作;宽依赖则指父RDD的每个分区被多个子RDD分区使用,如分组和某些join操作。窄依赖任务可在同一阶段完成,而宽依赖因Shuffle的存在需划分不同阶段执行。借助Spark Web Console可查看任务的DAG图及阶段划分。
346 15
|
7月前
|
SQL 数据采集 监控
VeryReport:高效智能的报表软件,助力企业数据可视化决策
VeryReport:高效智能的报表软件,助力企业数据可视化决策
|
8月前
|
传感器 人工智能 安全
2024年的7大网络安全新闻
2024年的7大网络安全新闻