Klassen- und Stilbindung, die Sie jeden Tag in Vue.js lernen müssen

Eine häufige Anforderung für die Datenbindung ist die Manipulation der Klassenliste eines Elements und seiner Inline-Stile. Da es sich bei beiden um Attribute handelt, können wir sie mit v-bind verarbeiten: Wir müssen lediglich die endgültige Zeichenfolge des Ausdrucks auswerten. Die Verkettung von Zeichenfolgen ist jedoch umständlich und fehleranfällig. Daher verbessert Vue.js v-bind speziell, wenn es mit Klassen und Stilen verwendet wird. Der Ergebnistyp eines Ausdrucks kann neben Strings auch ein Objekt oder ein Array sein.

HTML-Klasse binden

Sie können zwar Mustache-Tags verwenden, um Klassen zu binden, z. B. „{% raw %}class=“{{ className }}“{% endraw %}“, aber wir Es wird nicht empfohlen, diese Schreibmethode mit „v-bind:class“ zu mischen. Sie können nur eines von beiden wählen!

Objektsyntax

Wir können v-bind:class an ein Objekt übergeben, um Klassen dynamisch zu wechseln. Beachten Sie, dass die v-bind:class-Direktive mit dem normalen Klassenattribut koexistieren kann:

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>
 
data: {
 isA: true,
 isB: false
}

wird wie folgt gerendert:

4a0820b0f8ccac8a74c1d5d12ef47aac16b28748ea4df4d9c2150843fecfba68

Wenn sich isA und isB ändern, wird die Klassenliste entsprechend aktualisiert. Wenn beispielsweise isB wahr wird, wird die Klassenliste zu „statische Klasse-a-Klasse-b“.

Sie können ein Objekt auch direkt in die Daten binden:

<div v-bind:class="classObject"></div>
 
data: {
 classObject: {
 &#39;class-a&#39;: true,
 &#39;class-b&#39;: false
 }
}

Wir können hier auch eine berechnete Eigenschaft des zurückgegebenen Objekts binden. Dies ist ein häufig verwendetes und leistungsstarkes Muster.

Array-Syntax

Wir können ein Array an v-bind:class übergeben, um eine Klassenliste anzuwenden:

<div v-bind:class="[classA, classB]">
 
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}

gerendert als:

95d66a4b96383bd3e82abe8c8e40596f16b28748ea4df4d9c2150843fecfba68

Wenn Sie auch Klassen in der Liste basierend auf Bedingungen wechseln möchten, können Sie einen ternären Ausdruck verwenden Formel:

19de9f32bc61168916c704eb219bf5b9

Dieses Beispiel fügt immer KlasseA hinzu, aber nur, wenn isB wahr ist KlasseB.

Allerdings ist das Schreiben auf diese Weise etwas umständlich, wenn mehrere bedingte Klassen vorhanden sind. In 1.0.19+ können Sie die Objektsyntax innerhalb der Array-Syntax verwenden:

5e8eb295b79d324df5d621d3d0eaa446

Inline-Stil binden

Objektsyntax

Die Objektsyntax von v-bind:style ist sehr intuitiv – sie sieht sehr nach CSS aus, ist aber eigentlich ein JavaScript-Objekt. CSS-Eigenschaftsnamen können in CamelCase oder Kebab-Case benannt werden:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>
 
data: {
 activeColor: &#39;red&#39;,
 fontSize: 30
}

Normalerweise ist es besser, direkt an ein Stilobjekt zu binden, um die Vorlage übersichtlicher zu gestalten:

<div v-bind:style="styleObject"></div>
 
data: {
 styleObject: {
 color: &#39;red&#39;,
 fontSize: &#39;13px&#39;
 }
}

In ähnlicher Weise wird die Objektsyntax häufig in Verbindung mit berechneten Eigenschaften verwendet, die Objekte zurückgeben.

Array-Syntax

Die Array-Syntax von v-bind:style kann mehrere Stilobjekte auf ein Element anwenden:

565466c4c2eadce5aff3b05147207428

Präfix automatisch hinzufügen

Wenn v-bind:style CSS-Eigenschaften verwendet, die Herstellerpräfixe erfordern, wie z. B. transform, erkennt Vue.js automatisch das entsprechende Präfix und fügt es hinzu .

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website abonniert.

Weitere Artikel zum Thema Klassen- und Stilbindung, die Sie jeden Tag in Vue.js lernen müssen, finden Sie auf der chinesischen PHP-Website!