Estilização através do atributo style no Vue

Os estilos CSS podem ser adicionados diretamente através do atributo style. Para isso, um objeto é passado para o atributo, no qual as propriedades CSS desejadas devem ser as chaves desse objeto, e os valores correspondentes das propriedades CSS - os valores desse objeto.

Vamos, por exemplo, colorir um parágrafo em vermelho e adicionar uma borda verde:

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

Agora, vamos definir um font-size de 30px para ele. Como em um objeto não pode haver uma chave com hífen, nós devemos colocá-la entre aspas:

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

Também é possível escrever fontSize em vez de font-size - isso também funcionará:

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

Dado um parágrafo. Pinte seu texto de verde e seu fundo de amarelo.

Dado um parágrafo. Torne seu texto negrito e itálico.