Stilizacija preko atributa style u Vue

CSS stilovi se mogu direktno dodavati preko atributa style. Za to se u atribut prosleđuje objekat, u kome željena CSS svojstva moraju biti ključevi tog objekta, a odgovarajuće vrednosti CSS svojstava - vrednostima tog objekta.

Hajde za primer da obojimo neki paragraf u crvenu boju i dodamo mu granicu zelene boje:

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

Hajde sada umesto granice da mu postavimo font-size na 30px. Pošto u objektu ne može biti ključa sa crticom, mi ga moramo staviti pod navodnike:

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

Može se takođe umesto font-size napisati fontSize - i ovo će raditi:

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

Dat je paragraf. Obojite njegov tekst u zelenu boju, a njegovu pozadinu - u žutu.

Dat je paragraf. Učinite njegov tekst podebljanim i kurzivnim.