Stylisation via l'attribut style dans Vue

Les styles CSS peuvent être ajoutés directement via l'attribut style. Pour cela, un objet est passé à l'attribut, dans lequel les propriétés CSS souhaitées doivent être les clés de cet objet, et les valeurs correspondantes des propriétés CSS - les valeurs de cet objet.

Prenons par exemple pour colorer un paragraphe en rouge et ajoutons une bordure verte :

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

Maintenant, définissons sa font-size à 30px au lieu d'une bordure. Comme dans un objet, une clé ne peut pas contenir de trait d'union, nous devons la mettre entre guillemets :

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

On peut aussi écrire fontSize au lieu de font-size - cela fonctionnera également :

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