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:

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

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

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

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

Podan je odstavek. Pobarvaјte njegovo besedilo v zeleno barvo, njegovo ozadje pa v rumeno.

Podan je odstavek. Naredite njegovo besedilo krepko in ležeče.