浅谈Angular10中class和style绑定-tutorial js-php.cn

浅谈Angular10中class和style绑定

青灯夜游

Lepaskan： 2021-03-23 10:44:51

ke hadapan

2283 orang telah melayarinya

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

浅谈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、基本语法

<p [class.p-box]=&#39;flag&#39;>
    <button (click)=&#39;changeFlag()&#39;>修改flag的值</button></p>

Salin selepas log masuk

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

flag = truechangeFlag():void {
    this.flag = !this.flag}

Salin selepas log masuk

3、当flag为真的时候
在这里插入图片描述

4、当flag为假的时候
在这里插入图片描述

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

1、字符串的形式

<p [class]=&#39;classExpr&#39;>绑定字符串的class</p>

Salin selepas log masuk

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

Salin selepas log masuk

2、绑定结果

在这里插入图片描述

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

1、对象的形式

<p [class]=&#39;classExpr&#39;>绑定对象形式的class</p>

Salin selepas log masuk

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

Salin selepas log masuk

2、绑定结果

在这里插入图片描述

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

1、数组的形式

<p [class]=&#39;classExpr&#39;>绑定数组形式的class</p>

Salin selepas log masuk

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

Salin selepas log masuk

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]=&#39;styleExpr&#39;>绑定单个形式的style</p>

Salin selepas log masuk

styleExpr:string = '100px'

Salin selepas log masuk

2、绑定结果

在这里插入图片描述

2.2 带有单位的单个属性

1、带有单位

<p [style.width.px]=&#39;100&#39;>绑定单个形式的style</p>

Salin selepas log masuk

2、绑定结果

在这里插入图片描述

2.3 多个属性的绑定

<p [style]=&#39;styleExpr&#39;>绑定多个形式的style</p>

Salin selepas log masuk

1、字符串

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

Salin selepas log masuk

2、对象

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

Salin selepas log masuk

3、结果图

在这里插入图片描述

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

Atas ialah kandungan terperinci 浅谈Angular10中class和style绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

浅谈Angular10中class和style绑定

Angular10中class和style的绑定

1.class绑定

1.1 单属性绑定

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

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

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

2. style绑定

2.1 单个属性

2.2 带有单位的单个属性

2.3 多个属性的绑定

`Angular10`中`class`和`style`的绑定

1.`class`绑定

2. `style`绑定