Стилгузорӣ тавассути атрибути style дар Vue

CSS стилҳоро мустақиман тавассути атрибути style метавон илова кард. Барои ин ба атрибут объект дода мешавад, ки дар он хусусиятҳои CSS-и дархостшуда бояд калидҳои ин объект бошанд, ва қиматҳои мувофиқи хусусиятҳои CSS - қиматҳои ин объект бошанд.

Барои мисол биёед як абзацро ба ранги сурх ранг кунем ва ҳудуди сабз ба он илова кунем:

<template>
	<p :style="{color: 'red', border: '1px solid green'}">
		матн
	</p>
</template>

Ҳоло ба ҷои ҳудуд барои он font-size-ро ба 30px таъин кунем. Азбаски дар объект калиде бо тире наметавонад бошад, мо бояд онро дар қошиҳо гузорем:

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

Ҳамчунин метавон ба ҷои font-size навишт fontSize - ин ҳам кор мекунад:

<template>
	<p :style="{color: 'red', fontSize: '30px'}">
		матн
	</p>
</template>

Абзац дода шудааст. Матни онро ба ранги сабз ва заминаашро ба ранги зард ранг кунед.

Абзац дода шудааст. Матни онро дарозу курсивӣ созед.