Une brève discussion sur la liaison de classe et de style dans Angular10

Cet article vous présentera la liaison de classe et de style dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde. Reliure de

et

en

Angular10classstyle

1.classReliure

绑定类型	语法	输入类型	输入值范例
单个类绑定	[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’]

Connexe recommandations : "Tutoriel angulaire"

1.1 Liaison d'attribut unique

1 Syntaxe de base

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

2 Lorsque la valeur de l'expression est Quand elle. est vrai, Angular ajoutera cette classe, quand elle est fausse, elle supprimera

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

3. Quand flag est vrai,

4. flag est faux

1.2 Liaison d'attributs multiples - forme de chaîne

1. Forme de chaîne

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

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

2. >

1.3 Liaison d'attributs multiples - forme d'objet

1. Forme d'objet

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

rrree

2 Résultats de liaison

1.4 Forme de tableau de liaison à attributs multiples

1. Forme de tableau

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

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

2, résultat de liaison

2. >Liaison

tr>

Type de liaison	Syntaxe	Type d'entrée	Valeur d'entrée exemple
Liaison de style unique Définir	[style.width]="width"	chaîne undefined null	« 100px »
Liaison de style unique avec unité	[style.width.px]=« largeur »	nombre non défini nul	100
Liaisons de styles multiples	[style]="styleExpr" td>	chaîne {[clé : chaîne] : chaîne non définie null}	"largeur : 100 px ; hauteur : 100 px" style {largeur : '100px', hauteur : '100px '}

2.1 Attribut unique

绑定类型	语法	输入类型	输入值范例
单一样式绑定	[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’}

1 La forme d'un attribut unique

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

rrree

2. 🎜>

2.2 Attribut unique avec unité

1 Avec unité

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

2 Résultat de liaison

<.>

2.3 Liaison de plusieurs attributs

styleExpr:string = '100px'

1. Chaîne

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

2.

Plus de connaissances liées à la programmation, veuillez visiter :

Vidéos de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!