Stile aus Daten

Manchmal geht ein Wert aus den Daten direkt in CSS: die Breite eines Balkens, eine Farbe, die der Nutzer gewählt hat, eine Größe. Dafür gibt es :style mit einem Objekt aus CSS-Eigenschaften:

<script setup>
const groesse = 24;
const farbe = "#8b5e34";
</script>

<template>
    <p :style="{ fontSize: groesse + 'px', color: farbe }">Café am Eck</p>
</template>

Der Text des Absatzes ist 24 Pixel groß und braun.

Die Namen der CSS-Eigenschaften werden in camelCase geschrieben, wie bei element.style im JavaScript-Kurs: fontSize für font-size, backgroundColor für background-color. (Die Namen aus CSS funktionieren auch, in Anführungszeichen: { 'font-size': groesse + 'px' }.) Ein Wert ist Text, mit seiner Einheit, wie in CSS: groesse + 'px' ergibt 24px. Bei einer reinen Zahl, { fontSize: groesse }, bekommt der Browser 24 ohne Einheit und ignoriert es.

Verwende :style für Werte, die aus Daten kommen. Für ein Aussehen, das immer gleich ist oder nur ein- und ausgeschaltet wird, ist eine Klasse in <style scoped> mit :class leichter zu lesen.