Стилгузорӣ тавассути атрибути 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>
Абзац дода шудааст. Матни онро ба ранги сабз ва заминаашро ба ранги зард ранг кунед.
Абзац дода шудааст. Матни онро дарозу курсивӣ созед.