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:

App.vue<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:

App.vue<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á:

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