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:

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

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

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

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

Gegeben ist ein Absatz. Färben Sie seinen Text grün und seinen Hintergrund gelb.

Gegeben ist ein Absatz. Machen Sie seinen Text fett und kursiv.