Styling über das style-Attribut in Vue

CSS-Stile können direkt über das Attribut style hinzugefügt werden. Dazu wird dem Attribut ein Objekt übergeben, in dem die gewünschten CSS-Eigenschaften die Schlüssel dieses Objekts sein müssen und die entsprechenden Werte der CSS-Eigenschaften - die Werte dieses Objekts.

Lassen Sie uns als Beispiel einen Absatz rot einfärben und einen Rand in grüner Farbe hinzufügen:

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    text
  </p>
</template>

Lassen Sie uns nun anstelle des Rands font-size auf 30px setzen. Da in einem Objekt kein Schlüssel mit Bindestrich stehen kann, müssen wir ihn in Anführungszeichen setzen:

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    text
  </p>
</template>

Man kann auch statt font-size fontSize schreiben - das wird auch funktionieren:

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    text
  </p>
</template>