Styling via het style attribuut in Vue

CSS-stijlen kunnen direct worden toegevoegd via het style attribuut. Hiervoor wordt een object doorgegeven aan het attribuut, waarin de gewenste CSS-eigenschappen de sleutels van dit object moeten zijn, en de bijbehorende waarden van de CSS-eigenschappen - de waarden van dit object.

Laten we bijvoorbeeld een alinea rood kleuren en een rand groene kleur toevoegen:

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

Laten we nu in plaats van een rand de font-size instellen op 30px. Omdat in een object geen sleutel met een koppelteken kan staan, moeten we het tussen aanhalingstekens zetten:

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

Je kunt in plaats van font-size ook fontSize schrijven - dit zal ook werken:

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

Gegeven een alinea. Kleur de tekst groen en de achtergrond geel.

Gegeven een alinea. Maak de tekst vet en cursief.