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:

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

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

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