Eine kurze Diskussion über Klassen- und Stilbindung in Angular10

Dieser Artikel stellt Ihnen die Klassen- und Stilbindung in Angular vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Bindung von class und style in Angular10Angular10中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

1 class BindungBindungstyp: Syntax: Eingabetyp: Beispiel für einen Eingabewert string{[key:string]:boolean |null}Array {foo: true, bar: false}Verwandte Empfehlungen: „Angular-Tutorial》1.2 Bindung mehrerer Attribute - Zeichenfolgenform1, Zeichenfolgenform2, Bindungsergebnis 2, Bindungsergebnis

		Mehrere Klassenbindungen	[class]='classExpr'
'my-class1 my- class2'	['foo','bar']
1.1 Einzelattributbindung	1. Wenn der Wert des Ausdrucks wahr ist, wird Angular hinzugefügt Diese Klasse, und wenn sie falsch ist, wird sie entfernt /000/024/29fb0ec3c6507417b0831fe42888b00c-0.png" alt="Bildbeschreibung hier einfügen"/>	4. Wenn flag falsch ist
<p>绑定单个形式的style</p> styleExpr:string = '100px'		1.3 Bindung mehrerer Attribute – Objektform	1, Objektform <p>绑定单个形式的style</p> <p>绑定多个形式的style</p>

1.4 Bindungs-Array-Formular mit mehreren Attributen

1. Array-Formular

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

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

2. Bindungsergebnis

2. styleBinding

Bindungstyp

Syntax

Eingabe Typ: Beispiel für einen Eingabewert

[Stil .width.px] = "width"

Nummer undefiniert null

100

Mehrere Stilbindungen

[style]="styleExpr"

string {[key: string]: string undefiniert null}

„Breite: 100 Pixel; Höhe: 100 Pixel“ 🎜2.2 Einzelnes Attribut mit Einheit🎜🎜 1. Mit Einheit 🎜rrreee🎜2. Bindungsergebnis 🎜🎜🎜🎜🎜2.3 Bindung mehrerer Attribute 🎜rrreee🎜2. Objekt 🎜rrreee 🎜3. Ergebnisdiagramm 🎜 🎜🎜🎜 🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Klassen- und Stilbindung in Angular10. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!