Stílusozás a style attribútum segítségével Vue-ban

A CSS stílusok közvetlenül hozzáadhatók a style attribútumon keresztül. Ehhez egy objektumot kell átadni az attribútumnak, amelyben a kívánt CSS tulajdonságok ennek az objektumnak a kulcsai, a megfelelő CSS tulajdonságok értékei pedig az objektum értékei.

Példaként színezzünk pirosra egy bekezdést és adjunk hozzá zöld színű szegélyt:

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

Most a szegély helyett állítsuk be a font-size értékét 30px-re. Mivel egy objektumban nem lehet kötőjeles kulcs, idézőjelek közé kell tennünk:

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

A font-size helyett használhatjuk a fontSize-t is - ez is működni fog:

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

Adott egy bekezdés. Színezd a szövegét zöldre, a hátterét pedig sárgára.

Adott egy bekezdés. Tedd a szövegét félkövérré és dőlt betűssé.