Styling via style-attribut i Vue

CSS-stilarter kan tilføjes direkte via style-attributten. For at gøre dette overføres et objekt til attributten, hvor de ønskede CSS-egenskaber skal være nøgler i dette objekt, og de tilsvarende værdier for CSS-egenskaber - værdier for dette objekt.

Lad os for eksempel farve et afsnit i rød og tilføje en grøn grænse:

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

Lad os nu i stedet for en grænse indstille font-size til 30px. Da der i et objekt ikke kan være en nøgle med bindestreg, skal vi sætte den i anførselstegn:

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

Man kan også skrive fontSize i stedet for font-size - dette vil også virke:

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

Der gives et afsnit. Farv dets tekst i grøn farve, og dets baggrund - i gul.

Der gives et afsnit. Gør dets tekst fed og kursiv.