Attribute 绑定、类绑定和样式绑定
Attribute 绑定、类绑定和样式绑定
1. 绑定到 Attribute
优先设置带有 Property 绑定的元素的 Property。如果没有可绑定的元素 Property,可以使用 Attribute 绑定。
例如,ARIA和SVG 只有 Attribute。 ARIA 和 SVG 都不对应于元素的 Property,也不设置元素的 Property。在这些情况下,必须使用 Attribute 绑定,因为没有相应的目标 Property。
<p [attr.attribute-you-are-targeting]="expression"></p>
当表达式解析为 null 时,Angular 会完全删除该 Attribute。
用例
用例1:设置 ARIA Attribute
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
用例2:绑定到 colspan
colspan Attribute 可帮助你以编程方式让表格保持动态。根据应用中用来填充表的数据量,某一行要跨越的列数可能会发生变化。
要将 Attribute 绑定到 的 colspan Attribute:
- 使用以下语法指定 colspan:[attr.colspan] 。
- 将 [attr.colspan] 设置为等于某个表达式。
在下面的示例中,我们将 colspan Attribute 绑定到表达式 1 + 1。
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
注意:有时,Property 名和 Attribute 名之间存在差异。
colspan 是 的 Attribute,而 colSpan(注意 “S” 是大写)是 Property。使用 Attribute 绑定时,请使用带小写 “s” 的 colspan。有关如何绑定到 colSpan Property 的更多信息,请参见 Property 绑定 中的 colspan 和 colSpan 部分。
绑定到 class Attribute
可以使用类绑定从元素的 class Attribute 中添加和删除 CSS 类名称。
绑定到单个 CSS class
要创建单个类绑定,请使用前缀 class 后跟一个点和 CSS 类的名称,例如 [class.sale]="onSale"
。onSale 为真值时添加类,在表达式为假值时(undefined 除外)删除类。
绑定到多个 CSS 类
要绑定到多个类,请使用 [class] 来设置表达式。例如,[class]="classExpression"
。
表达式可以是用空格分隔的类名字符串,也可以是将类名作为键并将真或假表达式作为值的对象。对于对象格式,Angular 会在其关联的值为真时才添加类。
对于任何类似对象的表达式(例如 object、Array、Map 或 Set,必须更改对象的引用,Angular 才能更新类列表。在不更改对象引用的情况下只更新其 Attribute 是不会生效的。
如果同一类名有多个绑定,Angular 会根据样式优先级来确定要使用的绑定。
绑定到 style Attribute
使用样式绑定来动态设置样式。
绑定到单一样式
要创建对单个样式的绑定,请使用前缀 style 后跟一个点和 CSS style Attribute 的名称。
例如 [style.width]="width"
。 Angular 会将该 Attribute 设置为绑定表达式的值,这个值通常是一个字符串。(可选)你还可以添加单位扩展,例如 em 或 % ,它的值需要数字类型。
可以用中线格式或 camelCase 格式编写样式 Attribute 名。
绑定到多个样式
要切换多个样式,请绑定到 [style] Attribute,例如 [style]="styleExpression"
。该表达式通常是样式的字符串列表,例如 “width: 100px; height: 100px;” 。
还可以将表达式格式化为对象,此对象以样式名作为键、以样式值作为值,例如 {width: ‘100px’, height: ‘100px’}。
对于任何类似对象的表达式(例如 object、Array、Map 或 Set,必须更改对象的引用,Angular 才能更新类列表。在不更改对象引用的情况下更新其 Attribute 值是不会生效的。
如果同一个样式 Attribute 有多个绑定,Angular 将使用样式优先级来确定要使用的绑定。
—— END ——
Attribute 绑定、类绑定和样式绑定相关推荐
- 【JetPack】为现有 Android 项目配置视图绑定 ( ViewBinding ) 模块 ( 视图绑定不影响传统布局操作 | 视图绑定类关联 Activity | 视图绑定类本质 )
文章目录 I . 为现有项目配置 视图绑定 ( ViewBinding ) 应用 II . 视图绑定 ( ViewBinding ) 定制 III . 视图绑定 ( ViewBinding ) 对于正 ...
- 【JetPack】ViewBinding 视图绑定组件 ( 启用模块 | 视图绑定定制 | 绑定类名称生成规则 | 绑定类字段生成规则 | 绑定类获取根视图 | 绑定类获取布局组件 )
文章目录 I . 视图绑定组件简介 II . 视图绑定 ViewBinding 使用前提 ( Android Studio 3.6 ) III . 视图绑定组件启用 IV . 定制视图绑定 ( 启用视 ...
- 【JetPack】数据绑定 DataBinding 简介 ( 使用要求 | Gradle 版本 | 定义数据类 | 定义数据绑定布局 | Activity 数据绑定 | 绑定类生成规则 )
文章目录 I . 数据绑定 简介 II . 数据绑定 使用前提 ( 环境支持 ) III . 数据绑定 使用流程 一 : 启用数据绑定 IV . 数据绑定 使用流程 二 : 定义数据类 V . 数据绑 ...
- 【JetPack】视图绑定 ( ViewBinding ) 各种应用 ( 视图绑定两种方式 | Activity 布局 | 对话框布局 | 自定义组件布局 | RecyclerView 列表布局 )
文章目录 I . 视图绑定 ( ViewBinding ) 界面的两种方式 II . Activity 界面中 应用 视图绑定 ( ViewBinding ) III . Dialog 对话框界面中 ...
- angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录 属性绑定 样式绑定 绑定单一样式 绑定多个样式 用 NgStyle 设置内联样式 类绑定 绑定单个类样式 绑定到多个 CSS 类 用 NgClass 添加和删除类 条件渲染 列表渲染 *ng ...
- VueJS样式绑定v-bind:class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...
- Angular属性绑定,class绑定,事件绑定,属性样式绑定
多谢大佬指正,原创转载连接. 属性绑定 插值表达式:src="{{user.pic}}" 使用: [ ] :[property]="变量" 使用:bind-:b ...
- vue3 样式绑定class绑定
class绑定1:class=sty为一个变量,当用''引起来时为一个字符串,sty其值为vm中data的box1取box1样式,触发点击事件后sty取值为sty2,取的sty2的样式. class2 ...
- 007_Vue style样式绑定
1. style样式绑定处理 1.1. 对象语法 <div v-bind:style="{width: '400px', height: '50px'}"></d ...
最新文章
- 嵌入式linux开发中常见的虚拟机和主机的文件共享问题
- linux怎么复制粘贴_linux中的实用技巧和快捷键总结
- xml方式实现aop-快速入门
- Windows 10 IoT Core 17101 for Insider 版本更新
- 前端学习(3138):react-hello-react之组件挂载流程
- [css] 使用css实现一个loading的效果
- 二、python_base
- oracle11g ADR 位置
- 小心调用Replicator, While 和 CAG子活动
- ai的预览模式切换_当AI频繁切换色彩预览模式时 颜色会越变越深 求解?
- mongodb常用操作——命令行
- 对“西刺免费代理IP“爬取、测试并存入MySQL
- 华为网络模拟器eNSP安装教程
- 电脑计算机未输出任何信号 键盘没亮,戴尔计算机不显示信号,为什么计算机屏幕不显示...
- 育碧首款区块链游戏真的来了吗?
- Python上位机与C51单片机串口通信
- 爆款“小黄鸭”之后,实在RPA助力电商人双11提销量
- Unix 编程三件套环境搭建
- Web手机开发框架一览
- 想考阿里云acp证书,报哪个机构好?