Tyylittely style-attribuutin kautta Vuesta

CSS-tyylejä voidaan lisätä suoraan style-attribuutin kautta. Tätä varten attribuutille välitetään objekti, jossa halutut CSS-ominaisuudet ovat tämän objektin avaimia, ja vastaavat CSS-ominaisuuksien arvot - objektin arvoja.

Esimerkiksi maalataanpa jokin kappale punaiseksi ja lisätään vihreä reunus:

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

Asetetaanpa nyt sille reunan sijaan font-size:ksi 30px. Koska objektissa ei voi olla avainta, jossa on viiva, meidän täytyy laittaa se lainausmerkkeihin:

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

Voit myös kirjoittaa font-size:n sijaan fontSize - se toimii myös:

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