Rumah >hujung hadapan web >tutorial js >浅谈Angular10中class和style绑定
本篇文章给大家介绍一下Angular中class和style绑定。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
Angular10
中class
和style
的绑定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’] |
相关推荐:《angular教程》
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、字符串的形式
<p [class]='classExpr'>绑定字符串的class</p>
classExpr:string = 'class-expr1 class-expr2 class-expr3'
2、绑定结果
1、对象的形式
<p [class]='classExpr'>绑定对象形式的class</p>
classExpr:object = { 'foo': true, 'bar': false}
2、绑定结果
1、数组的形式
<p [class]='classExpr'>绑定数组形式的class</p>
classExpr:Array<string> = ['foo','bar']
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’} |
1、单个属性的形式
<p [style.width]='styleExpr'>绑定单个形式的style</p>
styleExpr:string = '100px'
2、绑定结果
1、带有单位
<p [style.width.px]='100'>绑定单个形式的style</p>
2、绑定结果
<p [style]='styleExpr'>绑定多个形式的style</p>
1、字符串
styleExpr:string = 'width: 100px;height: 200px'
2、对象
styleExpr:object = { width: '100px', height: '200px'}
3、结果图
更多编程相关知识,请访问:编程视频!!
Atas ialah kandungan terperinci 浅谈Angular10中class和style绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!