Maison >interface Web >js tutoriel >Une brève discussion sur la liaison de classe et de style dans Angular10

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

青灯夜游
青灯夜游avant
2021-03-23 10:44:512276parcourir

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 Une brève discussion sur la liaison de classe et de style dans Angular10

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,
Une brève discussion sur la liaison de classe et de style dans Angular10

4. flag est faux
Une brève discussion sur la liaison de classe et de style dans Angular10

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. >

Une brève discussion sur la liaison de classe et de style dans Angular101.3 Liaison d'attributs multiples - forme d'objet

1. Forme d'objet

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

2 Résultats de liaison

Une brève discussion sur la liaison de classe et de style dans Angular101.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

Une brève discussion sur la liaison de classe et de style dans Angular102. >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éUne brève discussion sur la liaison de classe et de style dans Angular10

1 Avec unité

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

2 Résultat de liaison

<.>

2.3 Liaison de plusieurs attributs

styleExpr:string = '100px'
Une brève discussion sur la liaison de classe et de style dans Angular101. 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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer