Angular10中class和style的绑定
1.class绑定
| 绑定类型 | 语法 | 输入类型 | 输入值范例 |
|---|---|---|---|
| 单个类绑定 | [class.foo]=‘flag’ | boolean|undefined|null | true,false |
| 多个类绑定 | [class]=‘classExpr’ | string {[key:string]:boolean | undefined | null} Array < string> |
‘my-class1 my-class2’ {foo: true, bar: false} [‘foo’,‘bar’] |
1.1 单属性绑定
1、基本语法
<p [class.p-box]='flag'>
<button (click)='changeFlag()'>修改flag的值</button></p>
2、当表达式的值为真的时候，Angular就会加上这个类，为假的时候就会移除
flag = truechangeFlag():void {
this.flag = !this.flag}
3、当flag为真的时候
4、当flag为假的时候
1.2 多个属性绑定-字符串的形式
1、字符串的形式
<p [class]='classExpr'>绑定字符串的class</p>
classExpr:string = 'class-expr1 class-expr2 class-expr3'
2、绑定结果
1.3 多个属性绑定-对象的形式
1、对象的形式
<p [class]='classExpr'>绑定对象形式的class</p>
classExpr:object = {
'foo': true,
'bar': false}
2、绑定结果
1.4 多个属性绑定-数组的形式
1、数组的形式
<p [class]='classExpr'>绑定数组形式的class</p>
classExpr:Array<string> = ['foo','bar']
2、绑定结果
2. style绑定
| 绑定类型 | 语法 | 输入类型 | 输入值范例 |
|---|---|---|---|
| 单一样式绑定 | [style.width]=“width” | string undefined null | “100px” |
| 带单位的单一样式绑定 | [style.width.px]=“width” | number undefined null | 100 |
| 多个样式绑定 | [style]=“styleExpr” | string {[key: string]: string undefined null} |
“width: 100px; height: 100px” {width: ‘100px’, height: ‘100px’} |
2.1 单个属性
1、单个属性的形式
<p [style.width]='styleExpr'>绑定单个形式的style</p>
styleExpr:string = '100px'
2、绑定结果
2.2 带有单位的单个属性
1、带有单位
<p [style.width.px]='100'>绑定单个形式的style</p>
2、绑定结果
2.3 多个属性的绑定
<p [style]='styleExpr'>绑定多个形式的style</p>
1、字符串
styleExpr:string = 'width: 100px;height: 200px'
2、对象
styleExpr:object = {
width: '100px',
height: '200px'}
3、结果图
