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

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
}

Nach dem Login kopieren

wird wie folgt gerendert:

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

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

gerendert als:

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

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:

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
}

Nach dem Login kopieren

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;
 }
}

Nach dem Login kopieren

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:

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!

Verwandte Etiketten：

Vue.js Class 样式绑定

Quelle：php.cn

Vorheriger Artikel：Vue.js muss jeden Tag die bidirektionale Datenbindung lernen Nächster Artikel：vue.js Einführungs-Tutorial zur Bindung von Klassen- und Stilstilen

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors