Klassen- und Stilbindung


Inhaltsverzeichnis


Bindend HTML-Klasse

Objektsyntax

Wir können v-bind:class ein Objekt übergeben, um dynamisch zu wechseln Klasse: 

<div v-bind:class="{ active: isActive }"></div>

Die obige Syntax bedeutet, dass active die Existenz oder Nichtexistenz dieser Klasse von der isActiveWahrheit des Datenattributs abhängt.

Sie können weitere Attribute im Objekt übergeben, um dynamisch zwischen mehreren Klassen zu wechseln. Darüber hinaus kann die v-bind:class-Direktive auch mit normalen Klassenattributen koexistieren. Wenn die folgende Vorlage vorhanden ist: 

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

und die folgenden Daten: 

data: {
  isActive: true,
  hasError: false
}

, wird das Ergebnis wie folgt gerendert: 

<div class="static active"></div>

Wenn sich isActive oder hasError ändert, wird die Die Klassenliste wird entsprechend erneuert. Wenn der Wert von hasError beispielsweise true ist, wird die Klassenliste zu "static active text-danger".

Das gebundene Datenobjekt muss nicht inline in der Vorlage definiert werden: 

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

Das Rendering-Ergebnis ist das gleiche wie oben. Wir können hier auch eine berechnete Eigenschaft des zurückgegebenen Objekts binden. Dies ist ein häufiges und leistungsstarkes Muster: 

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
<div v-bind:class="classObject"></div>


Array-Syntax

Wir können ein Array übergeben zu v-bind:class, um eine Klasse anzuwenden Liste: 

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
<div v-bind:class="[activeClass, errorClass]"></div>

wird wie folgt gerendert: 

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

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

<div class="active text-danger"></div>

Schreiben wie Dadurch wird immer errorClass hinzugefügt, aber nur, wenn isActive vorhanden ist Fügen Sie nur hinzu, wenn die Wahrheit wahr ist[1] activeClass.

Allerdings ist das Schreiben auf diese Weise etwas umständlich, wenn mehrere bedingte Klassen vorhanden sind. Daher kann die Objektsyntax auch in der Array-Syntax verwendet werden: 

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>


Wird für Komponenten verwendet

In diesem Kapitel wird davon ausgegangen, dass Sie sich bereits mit Vue-Komponenten< auskennen 🎜 >Haben Sie ein gewisses Verständnis. Natürlich können Sie hier auch überspringen und später darauf zurückkommen.

Bei Verwendung des

-Attributs für eine benutzerdefinierte Komponente werden diese Klassen dem Stammelement der Komponente hinzugefügt. Klassen, die bereits auf diesem Element vorhanden sind, werden nicht überschrieben. class

Wenn Sie beispielsweise diese Komponente deklarieren: 

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

und dann bei der Verwendung einige Klassen hinzufügen: 

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

HTML wird wie folgt gerendert: 

<my-component class="baz boo"></my-component>

Gleiches gilt für Klassen mit Datenbindung: 

<p class="foo bar baz boo">Hi</p>

Wenn

ist wahrisActive[1] wenn HTML Wird wie folgt gerendert: 

<my-component v-bind:class="{ active: isActive }"></my-component>


inline gebunden Stil

Objektsyntax

Die Objektsyntax ist sehr intuitiv – sie ähnelt stark CSS, ist aber tatsächlich ein JavaScript-Objekt. CSS-Eigenschaftsnamen können in CamelCase oder Kebab-Case benannt werden (denken Sie daran, sie in Anführungszeichen zu setzen): v-bind:style

<p class="foo bar active">Hi</p>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Normalerweise ist es besser, direkt an ein Stilobjekt zu binden, wodurch die Vorlagen klarer werden: 

data: {
  activeColor: 'red',
  fontSize: 30
}
<div v-bind:style="styleObject"></div>

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


Array-Syntax

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

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


fügt automatisch das Präfix <🎜 hinzu >Bei Verwendung von

müssen Sie das Browser-Engine-Präfix

v-bind:style hinzufügen CSS-Attribute wie erkennt Vue.js automatisch und fügt das entsprechende Präfix hinzu. transform


Mehrfachwert

2.3.0

Ab 2.3.0 können Sie
Das Attribut in der Bindung stellt ein Array mit mehreren Werten bereit, das häufig zur Bereitstellung mehrerer Präfixwerte verwendet wird, zum Beispiel: 

<div v-bind:style="[baseStyles, overridingStyles]"></div>
styleWenn Sie so schreiben, wird nur der letzte Wert im Array gerendert, der vom Browser unterstützt wird . Wenn der Browser in diesem Fall Flexbox ohne das Browser-Präfix unterstützt, wird nur

gerendert.

display: flex


Anmerkung des Übersetzers

[1] Wahrheit ist nicht

, siehe Erklärung von

MDNtrue für Einzelheiten.