KAPITEL 5

Klassen und Styles verknüpfen

Mindestens genauso wichtig wie das Rendering von Daten in einem Template ist die dynamische Anpassung von Klassen oder Styles für ein HTML-Element basierend auf den Daten der Vue-Instanz. Da es sich bei class und style um herkömmliche HTML-Attribute handelt, kann mit v-bind eine Verknüpfung mit den Daten realisiert und so etwa ein String mit Klassennamen erzeugt werden.

Damit das nicht zu mühselig wird, bietet Vue für diese zwei Attribute einige Zusatzfunktionen an, mit denen auch Arrays oder ganze Objekte innerhalb von v-bind ausgewertet werden können, um die Klassen oder Styles für ein HTML-Element zu rendern.

CSS-Klassen verknüpfen

Vue stellt verschiedene syntaktische Varianten bereit, um CSS-Klassen basierend auf den Daten der Vue-Instanz an ein Element zu knüpfen.

Objektsyntax

Es kann ein Objekt an v-bind:class übergeben werden, um dynamisch zwischen verschiedenen Klassen zu wechseln:

Mit diesem Beispiel wird die Anwesenheit der CSS-Klasse active vom Ergebnis der booleschen Prüfung des Datenattributs isActive abhängig gemacht. Ist isActive also true, wird die CSS-Klasse active in das Attribut class an das HTML-Element angefügt. Dieses Beispiel lässt sich beliebig erweitern, indem einfach weitere Attribute an das Objekt angefügt werden:

Das erzeugte HTML-Markup des Templates sähe wie folgt aus:

Wie dieses Beispiel zeigt, kann v-bind:class auch ohne Probleme in Kombination mit einem normalen class-Attribut verwendet werden. Vue führt beim Rendern des Templates einfach beide Attribute zusammen. Sobald sich nun der Wert der Datenattribute isActive oder hasError ändert, wird Vue auch das Template aktualisieren.

Das Klassenobjekt muss übrigens nicht zwingend als Ausdruck unter v-bind:class deklariert werden. Stattdessen kann auch einfach ein Objekt aus dem Datenobjekt der Vue-Instanz übergeben werden:

Anstelle eines Datenobjekts lässt sich ebenfalls eine Computed Property verwenden:

Array-Syntax

Auch Arrays können an v-bind:class übergeben werden:

Dieses Beispiel erzeugt die folgende Ausgabe:

Soll eine Klasse des Arrays je nach Zustand der Daten ausgetauscht werden, kann dies über einen ternären Ausdruck (If-Shorthand) erreicht werden:

Hier wird die Klasse errorClass immer ausgegeben. activeClass erscheint nur, wenn isActive den Wert true zurückliefert. Falls mehrere ternäre Ausdrücke verwendet werden, kann es jedoch schnell unübersichtlich werden. Daher lassen sich auch Objekte innerhalb von Arrays nutzen:

Mit Components

Benutzt man das Attribut class bei einer Vue-Component, werden die CSS-Klassen an das Root-Element der Component angefügt. Dabei werden bereits bestehende CSS-Klassen nicht überschrieben. Auch wenn Vue-Components bislang noch nicht besprochen wurden, sei an dieser Stelle kurz eine sehr simple Vue-Component deklariert:

Soll diese Component nun mit zusätzlichen CSS-Klassen genutzt werden, fügt man sie an anderer Stelle wie folgt in das HTML ein:

Das von der Component erzeugte HTML lautet dann:

Natürlich kann dieser Ansatz auch mit v-bind kombiniert werden:

Dieses Beispiel würde das folgende HTML erzeugen, sofern das Datenattribut isOpen den Wert true zurückliefert:

Styles verknüpfen

Bei der Verknüpfung von Styles kümmert sich Vue automatisch um nötige Präfixe für bestimmte CSS-Eigenschaften wie transform und fügt je nach Browser Präfixe wie -webkit- oder -moz- selbstständig an.

Objektsyntax

Auch bei der Verknüpfung von Styles kann ein JavaScript-Objekt übergeben werden:

Attribute können in Camel Case oder Kebab Case mit Hochkommata geschrieben werden. Aus font-size wird somit also entweder fontSize oder 'font-size':

Um das Template übersichtlich zu halten, ist es sinnvoll, ein Objekt (oder eine Computed Property) an v-bind:style zu übergeben: