Vue да стиль атрибути орқали стиллаш

CSS стилларини тўғридан-тўғри style атрибути орқали қўшиш мумкин. Бунга атрибутта объект берилади, унинг калитлари керакли CSS хусусиятлари бўлиши керак, CSS хусусиятларининг мос қийматлари эса ушбу объектнинг қийматлари бўлади.

Мисол учун, бирор абзацни қизил рангга бойайлик ва унинг чегарасини яшил рангда қилайлик:

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

Энди чегара ўрнига унга font-sizeни 30px қилайлик. Чунки объектда дефисли калит бўлолмайди, биз уни қошиқ ичга олишимиз керак:

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

font-size ўрнига fontSize деб ёзиш мумкин - бу ҳам ишлайди:

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

Абзац берилган. Унинг матини яшил рангга, орқа фонини эса сариқ рангга боянг.

Абзац берилган. Унинг матини қалин ва курсив қилинг.