浅谈Angular10中class和style绑定

本篇文章给大家介绍一下Angular中class和style绑定。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

/2021/03/dc767dbd.jpg

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为真的时候
/2021/03/9216fc7d.png" alt="在这里插入图片描述

4、当flag为假的时候
/2021/03/978ecb3f.png" alt="在这里插入图片描述

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

1、字符串的形式

<p [class]='classExpr'>绑定字符串的class</p>

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

2、绑定结果

/2021/03/acf3c0ba.png" alt="在这里插入图片描述

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

1、对象的形式

<p [class]='classExpr'>绑定对象形式的class</p>

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

2、绑定结果

/2021/03/30888cb2.png" alt="在这里插入图片描述

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

1、数组的形式

<p [class]='classExpr'>绑定数组形式的class</p>

classExpr:Array<string> = ['foo','bar']

2、绑定结果

/2021/03/ab5e5bee.png" alt="在这里插入图片描述

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、绑定结果

/2021/03/ab440615.png" alt="在这里插入图片描述

2.2 带有单位的单个属性

1、带有单位

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

2、绑定结果

/2021/03/a9d47044.png" alt="在这里插入图片描述

2.3 多个属性的绑定

<p [style]='styleExpr'>绑定多个形式的style</p>

1、字符串

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

2、对象

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

3、结果图

/2021/03/6468cc47.png" alt="在这里插入图片描述

更多编程相关知识，请访问：编程视频！！

以上就是浅谈Angular10中class和style绑定的详细内容，更多请关注北冥有鱼其它相关文章！

本文转载自【PHP中文网】，希望能给您带来帮助，苟日新、日日新、又日新，生命不息，学习不止。