Stilizacija preko atributa style u Vue

CSS stilovi se mogu direktno dodavati preko atributa style. Za to se u atribut prosleđuje objekat, u kome željena CSS svojstva moraju biti ključevi tog objekta, a odgovarajuće vrednosti CSS svojstava - vrednostima tog objekta.

Hajde za primer da obojimo neki paragraf u crvenu boju i dodamo mu granicu zelene boje:

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

Hajde sada umesto granice da mu postavimo font-size na 30px. Pošto u objektu ne može biti ključa sa crticom, mi ga moramo staviti pod navodnike:

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

Može se takođe umesto font-size napisati fontSize - i ovo će raditi:

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