Stilizzazione tramite l'attributo style in Vue

Gli stili CSS possono essere aggiunti direttamente tramite l'attributo style. Per fare ciò, all'attributo viene passato un oggetto, in cui le proprietà CSS desiderate devono essere le chiavi di questo oggetto, e i valori corrispondenti delle proprietà CSS - i valori di questo oggetto.

Ad esempio, coloriamo un paragrafo di rosso e aggiungiamo un bordo verde:

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

Ora invece del bordo, impostiamo font-size a 30px. Poiché in un oggetto non può esserci una chiave con un trattino, dobbiamo racchiuderla tra virgolette:

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

Invece di font-size si può anche scrivere fontSize - funzionerà anche questo:

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