Angular10 中class和style的绑定

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. 基本语法

   <div [class.div-box]='flag'>
       <button (click)='changeFlag()'>修改flag的值button>
   div>
   

2. 当表达式的值为真的时候，Angular就会加上这个类，为假的时候就会移除

   flag = true
   changeFlag():void {
       this.flag = !this.flag
   }
   

3. 当flag为真的时候
   

4. 当flag为假的时候
   

1.2 多个属性绑定-字符串的形式

1. 字符串的形式

   <div [class]='classExpr'>绑定字符串的classdiv>
   

   classExpr:string = 'class-expr1 class-expr2 class-expr3'
   

2. 绑定结果
   

1.3 多个属性绑定-对象的形式

1. 对象的形式

   <div [class]='classExpr'>绑定对象形式的classdiv>
   

   classExpr:object = {
       'foo': true,
       'bar': false
   } 
   

2. 绑定结果
   

1.4 多个属性绑定-数组的形式

1. 数组的形式

   <div [class]='classExpr'>绑定数组形式的classdiv>
   

   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. 单个属性的形式

   <div [style.width]='styleExpr'>绑定单个形式的stylediv>
   

   styleExpr:string = '100px'
   

2. 绑定结果
   

2.2 带有单位的单个属性

1. 带有单位

   <div [style.width.px]='100'>绑定单个形式的stylediv>
   

2. 绑定结果
   

2.3 多个属性的绑定

<div [style]='styleExpr'>绑定多个形式的stylediv>

1. 字符串

   styleExpr:string = 'width: 100px;height: 200px'
   

2. 对象

   styleExpr:object = {
       width: '100px',
       height: '200px'
   }
   

3. 结果图