Klassen- und Stilbindungen #

Ein häufiger Bedarf an Datenbindung ist die Bearbeitung der Klassenliste eines Elements und der Inline-Stile. Da class und style beides Attribute sind, können wir v-bind verwenden, um ihnen dynamisch einen String-Wert zuzuweisen, ähnlich wie bei anderen Attributen. Allerdings kann der Versuch, diese Werte mit Hilfe von String-Konkatenation zu erzeugen, lästig und fehleranfällig sein. Aus diesem Grund bietet Vue spezielle Erweiterungen, wenn v-bind mit class und style verwendet wird. Zusätzlich zu Strings können die Ausdrücke auch auf Objekte oder Arrays ausgewertet werden.

Binden von HTML-Klassen #

Bindung an Objekte #

Wir können ein Objekt an :class (kurz für v-bind:class) übergeben, um Klassen dynamisch umzuschalten:

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

Die obige Syntax bedeutet, dass das Vorhandensein der Klasse "active" durch die [Wahrhaftigkeit] (https://developer.mozilla.org/en-US/docs/Glossary/Truthy) der Dateneigenschaft "isActive" bestimmt wird.

Es können mehrere Klassen umgeschaltet werden, indem mehrere Felder im Objekt vorhanden sind. Darüber hinaus kann die :class-Direktive auch mit dem einfachen Attribut class koexistieren. Der folgende Zustand ist also gegeben:

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

Und die folgende Vorlage:

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

Es wird wiedergegeben:

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

Wenn sich isActive oder hasError ändert, wird die Klassenliste entsprechend aktualisiert. Wenn zum Beispiel hasError zu true wird, wird die Klassenliste zu "static active text-danger".

Das gebundene Objekt muss nicht inline sein:

const classObject = reactive({
  active: true,
  'text-danger': false
})

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

Dies wird das gleiche Ergebnis liefern. Wir können auch an eine berechnete Eigenschaft binden, die ein Objekt zurückgibt. Dies ist ein gängiges und leistungsfähiges Muster:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

Bindung an Arrays #

Wir können :class an ein Array binden, um eine Liste von Klassen anzuwenden:

const activeClass = ref('active')
const errorClass = ref('text-danger')

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

<div :class="[activeClass, errorClass]"></div>

Das wird wiedergegeben:

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

Wenn Sie eine Klasse in der Liste auch bedingt umschalten möchten, können Sie dies mit einem ternären Ausdruck tun:

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

Dies wird immer errorClass anwenden, aber activeClass wird nur angewendet, wenn isActive wahr ist.

Dies kann jedoch etwas umständlich sein, wenn Sie mehrere bedingte Klassen haben. Deshalb ist es auch möglich, die Objektsyntax innerhalb der Array-Syntax zu verwenden:

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

Mit Komponenten #

Dieser Abschnitt setzt Kenntnisse voraus über Komponenten. Sie können es auch überspringen und später wiederkommen.

Wenn Sie das Attribut class für eine Komponente mit einem einzigen Wurzelelement verwenden, werden diese Klassen dem Wurzelelement der Komponente hinzugefügt und mit jeder bereits vorhandenen Klasse zusammengeführt.

Zum Beispiel, wenn wir eine Komponente mit dem Namen MyComponent mit der folgenden Vorlage haben:

<!-- child component template -->
<p class="foo bar">Hi!</p>

Fügen Sie dann einige Klassen hinzu, wenn Sie sie verwenden:

<!-- when using the component -->
<MyComponent class="baz boo" />

Das gerenderte HTML wird sein:

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

Das Gleiche gilt für Klassenbindungen:

<MyComponent :class="{ active: isActive }" />

Wenn "isActive" wahrheitsgemäß ist, wird der gerenderte HTML-Code so aussehen:

<p class="foo bar active">Hi</p>

Wenn Ihre Komponente mehrere Wurzelelemente hat, müssen Sie festlegen, welches Element diese Klasse erhalten soll. Sie können dies mit der Komponenteneigenschaft $attrs tun:

<!-- MyComponent template using $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

Wird gerendert:

<p class="baz">Hallo!</p>
<span>Dies ist eine untergeordnete Komponente</span>

Weitere Informationen über die Vererbung von Komponentenattributen finden Sie unter Fallthrough-Attribute Abschnitt.

Binden von Inline-Styles #

Bindung an Objekte #

:style unterstützt die Bindung an JavaScript-Objektwerte - es entspricht einer HTML-Element-Eigenschaft style:

const activeColor = ref('red')
const fontSize = ref(30)

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Obwohl camelCase-Schlüssel empfohlen werden, unterstützt :style auch CSS-Eigenschaftsschlüssel in Großbuchstaben (wie sie in CSS verwendet werden) - zum Beispiel:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

Oft ist es eine gute Idee, direkt an ein Stilobjekt zu binden, damit die Vorlage übersichtlicher ist:

const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

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

<div :style="styleObject"></div>

Auch hier wird die Bindung im Objektstil häufig in Verbindung mit berechneten Eigenschaften verwendet, die Objekte zurückgeben.

Bindung an Arrays #

Wir können :style an ein Array von mehreren Style-Objekten binden. Diese Objekte werden zusammengeführt und auf dasselbe Element angewendet:

<div :style="[baseStyles, overridingStyles]"></div>

Automatisches Voranstellen #

Wenn Sie eine CSS-Eigenschaft verwenden, für die ein vendor prefix in :style, wird Vue automatisch das entsprechende Präfix hinzufügen. Vue macht dies, indem es zur Laufzeit überprüft, welche Style-Eigenschaften im aktuellen Browser unterstützt werden. Wenn der Browser eine bestimmte Eigenschaft nicht unterstützt, dann werden verschiedene präfixierte Varianten getestet, um eine zu finden, die unterstützt wird.

Mehrere Werte #

Sie können zum Beispiel einer Stileigenschaft ein Array mit mehreren (vorangestellten) Werten zuweisen:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Dadurch wird nur der letzte Wert im Array wiedergegeben, den der Browser unterstützt. In diesem Beispiel wird display: flex für Browser dargestellt, die die unpräfixierte Version von flexbox unterstützen.