|
本篇文章给大家介绍一下Angular中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’] |
相关推荐：《angular教程》 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、结果图 
更多编程相关知识，请访问：编程视频！！ 以上就是浅谈Angular10中class和style绑定的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
