Vue'де style атрибуту аркылуу стилдештирүү

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>