Stilizarea prin atributul style în Vue

Stilurile CSS pot fi adăugate direct prin atributul style. Pentru aceasta, atributului i se transmite un obiect, în care proprietățile CSS dorite trebuie să fie cheile acestui obiect, iar valorile corespunzătoare ale proprietăților CSS - valorile acestui obiect.

Să exemplu, să colorăm un paragraf în roșu și să adăugăm o bordură verde:

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

Acum, în loc de bordură, să îi setăm font-size la 30px. Deoarece în obiect nu poate exista o cheie cu cratimă, trebuie să o punem între ghilimele:

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

Se poate de asemenea scrie fontSize în loc de font-size - și aceasta va funcționa:

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

Este dat un paragraf. Colorați textul său în verde, iar fundalul său - în galben.

Este dat un paragraf. Faceți textul său îngroșat și cursiv.