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:

<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:

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

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

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

Annettu kappale. Väritä sen teksti vihreäksi ja sen tausta keltaiseksi.

Annettu kappale. Tee sen tekstistä lihavoitu ja kursivoitu.