Stilizimi përmes atributit style në Vue

Stilet CSS mund të shtohen direkt përmes atributit style. Për këtë, në atribut kalojmë një objekt, në të cilin vetitë e dëshiruara CSS duhet të jenë çelësat e këtij objekti, dhe vlerat përkatëse të vetive CSS - vlerat e këtij objekti.

Le të shembull të ngjyrosim një paragraf në ngjyrë të kuqe dhe t'i shtojmë një kufi në ngjyrë të gjelbër:

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

Tani, në vend të kufirit, le t'i caktojmë font-size në 30px. Meqenëse në një objekt nuk mund të ketë çelës me vizë, ne duhet ta vendosim atë në thonjëza:

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

Mund të shkruhet gjithashtu fontSize në vend të font-size - edhe kjo do të funksionojë:

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