Štýlovanie cez atribút style vo Vue

CSS štýly je možné priamo pridávať cez atribút style. Na to sa do atribútu odovzdáva objekt, v ktorom želané CSS vlastnosti musia byť kľúčmi tohto objektu, a príslušné hodnoty CSS vlastností - hodnotami tohto objektu.

Pre príklad namaľujme nejaký odsek na červenú farbu a pridajme rám zelenej farby:

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

Teraz mu namiesto rámu nastavme font-size na 30px. Keďže v objekte nemôže byť kľúč s pomlčkou, musíme ho uviesť v úvodzovkách:

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

Je tiež možné namiesto font-size napísať fontSize - bude to tiež fungovať:

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