Estilización a través del atributo style en Vue

Los estilos CSS se pueden agregar directamente a través del atributo style. Para ello, se pasa un objeto al atributo, en el cual las propiedades CSS deseadas deben ser las claves de este objeto, y los valores correspondientes de las propiedades CSS - los valores de este objeto.

Como ejemplo, coloreemos un párrafo en rojo y agreguemos un borde verde:

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

Ahora, en lugar del borde, establezcamos font-size en 30px. Dado que en un objeto no puede haber una clave con un guión, debemos ponerla entre comillas:

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

También se puede escribir fontSize en lugar de font-size - esto también funcionará:

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

Se da un párrafo. Colorea su texto en verde y su fondo en amarillo.

Se da un párrafo. Haz que su texto sea en negrita y cursiva.