Stilius per style atributą Vue

CSS stilius galima tiesiogiai pridėti per style atributą. Tam į atributą perduodamas objektas, kuriame norimos CSS savybės turi būti to objekto raktai, o atitinkamos CSS savybių reikšmės - to objekto reikšmės.

Pavyzdžiui, nuspalvinkime kokią nors pastraipą raudona spalva ir pridėkime žalios spalvos rėmelį:

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

Dabar vietoj rėmelio nustatykime jam font-size į 30px. Kadangi objekte negali būti raktų su brūkšneliu, mes turime jį paimti į kabutes:

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

Taip pat galima vietoj font-size parašyti fontSize - tai taip pat veiks:

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