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 :

<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 :

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

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

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

Un paragraphe est donné. Coloriez son texte en vert et son fond en jaune.

Un paragraphe est donné. Rendez son texte gras et italique.