淺談Angular10中class與style綁定

本篇文章跟大家介紹一下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	'my-class1 my-class2' {foo: true, bar: false} ['foo ','bar']

相關推薦：《angular教學》

1.1 單屬性綁定

1、基本語法

<p>
    <button>修改flag的值</button></p>

2、當表達式的值為真的時候，Angular就會加上這個類，為假的時候就會移除

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

3、當flag為真的時候

4、當flag為假的時候

#1.2 多個屬性綁定-字串的形式

#1、字串的形式

<p>绑定字符串的class</p>

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

2、綁定結果

1.3 多個屬性綁定-物件的形式

1、物件的形式

<p>绑定对象形式的class</p>

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

2、綁定結果

1.4 多個屬性綁定-陣列的形式

1、陣列的形式

<p>绑定数组形式的class</p>

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

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</p>

styleExpr:string = '100px'

###2、綁定結果############### 2.2 帶有單位的單一屬性######1、帶有單位###

<p>绑定单个形式的style</p>

###2、綁定結果###############2.3 多個屬性的綁定###

<p>绑定多个形式的style</p>

###1、字串######

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

###2、物件###

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

###3、結果圖############# ##更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是淺談Angular10中class與style綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！