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

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

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

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

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

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

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

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