vue.js Einführungs-Tutorial zur Bindung von Klassen- und Stilstilen

1. Vorwort

Ich glaube, jeder weiß, dass eine allgemeine Anforderung für die Datenbindung darin besteht, die Klassenliste der Elemente und ihre Inline-Stile zu bedienen. Da es sich bei allen um Eigenschaften 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 für Klasse und Stil verwendet wird. Der Ergebnistyp eines Ausdrucks kann neben Strings auch ein Objekt oder ein Array sein.

2. HTML-Klasse binden

Bitte beachten Sie: Obwohl Sie Moustache-Tags zum Binden von Klassen verwenden können, wie z. B. class="{{ className }}", empfehlen wir dies nicht Die Schreibmethode wird mit v-bind:class gemischt. 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:

<div class="static class-a"></div>

wenn 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 den Daten binden:

<div v-bind:class="classObject"></div>

data: {
 classObject: {
 'class-a': true,
 'class-b': false
 }
}

Wir können hier auch ein Rückgabeobjekt binden. Berechnete Eigenschaften. 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: 'class-a',
 classB: 'class-b'
}

wird wie folgt gerendert:

<div class="class-a class-b"></div>

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

<div v-bind:class="[classA, isB ? classB : &#39;&#39;]">

In diesem Beispiel wird immer KlasseA hinzugefügt, aber nur KlasseB, wenn isB wahr ist.

2. Inline-Stile binden

Objektsyntax

Die Objektsyntax von v-bind:style ist sehr intuitiv – sieht ähnlich aus CSS, es ist 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: 'red',
 fontSize: 30
}

Es ist normalerweise besser, direkt an ein Stilobjekt zu binden. Machen Sie Vorlagen klarer:

<div v-bind:style="styleObject"></div>

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

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

3. Array-Syntax

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

<div v-bind:style="[styleObjectA, styleObjectB]">

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.

4. Zusammenfassung

Das Obige ist der gesamte Inhalt der vue.js-Bindungsklasse und -Stile, der für Sie im Detail vorgestellt wird und hoffentlich einen gewissen Referenz- und Lernwert hat Es wird für alle nützlich sein, vue.js zu lernen. Der Herausgeber wird weiterhin Informationen über vue.js aktualisieren.

Weitere Artikel zum Einführungs-Tutorial von vue.js zu Bindungsklassen und -stilen finden Sie auf der chinesischen PHP-Website!