Stílusozás a style attribútum segítségével Vue-ban

A CSS stílusok közvetlenül hozzáadhatók a style attribútumon keresztül. Ehhez egy objektumot kell átadni az attribútumnak, amelyben a kívánt CSS tulajdonságok ennek az objektumnak a kulcsai, a megfelelő CSS tulajdonságok értékei pedig az objektum értékei.

Példaként színezzünk pirosra egy bekezdést és adjunk hozzá zöld színű szegélyt:

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

Most a szegély helyett állítsuk be a font-size értékét 30px-re. Mivel egy objektumban nem lehet kötőjeles kulcs, idézőjelek közé kell tennünk:

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

A font-size helyett használhatjuk a fontSize-t is - ez is működni fog:

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