Oblikovanje z atributom style v Vue

CSS sloge lahko neposredno dodate prek atributa style. Za to se v atribut posreduje objekt, v katerem morajo biti želene CSS lastnosti ključi tega objekta, ustrezne vrednosti CSS lastnosti pa vrednosti tega objekta.

Za primer pobarvajmo kakšen odstavek v rdečo barvo in mu dodajmo obrobo zelene barve:

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

Zdaj pa mu namesto obrobe nastavimo font-size na 30px. Ker v objektu ne more biti ključa z vezajem, ga moramo dati v narekovaje:

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

Namesto font-size lahko tudi napišete fontSize - tudi to bo delovalo:

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