Stiilide lisamine läbi style atribuudi Vues

CSS stiile saab otse lisada läbi style atribuudi. Selleks antakse atribuudile objekt, kus soovitud CSS omadused peavad olema selle objekti võtmed, ja vastavad CSS omaduste väärtused - objekti väärtused.

Võtame näiteks mõne lõigu ja värvime selle punaseks ning lisame rohelise värvi piirjoone:

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

Paneme nüüd sellele piirjoone asemel font-size väärtuseks 30px. Kuna objektis ei saa olla võtit sidekriipsuga, peame panema selle jutumärkidesse:

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

Võib ka font-size asemel kirjutada fontSize - see toimib samuti:

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

Antud on lõik. Värvige selle tekst roheliseks värviks ja selle tausta kollaseks.

Antud on lõik. Tehke selle tekst rasvaseks ja kaldkirjaks.