Vue.js kurz & gut

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