Vue'де style атрибуту аркылуу стилдештирүү

CSS стилдерди түздөн-түз кошсо болот style атрибуту аркылуу. Бул үчүн атрибутка объект берилет, анда каалаган CSS касиеттери бул объекттин ачкычтары болушу керек, ал эми тиешелүү CSS касиеттеринин маанилери - объекттин маанилери болушу керек.

Мисал үчүн, кандайдыр бир абзацты кызыл түскө боёп, жашыл түстүү чек ара кошолу:

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

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

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

font-size ордуна fontSize деп да жаза аласыз - бул да иштейт:

<template>
	<p :style="{color: 'red', fontSize: '30px'}">
		текст
	</p>
</template>

Абзац берилген. Анын текстин жашыл түскө, ал эми фонун сары түскө боёңуз.

Абзац берилген. Анын текстин коюу жана курсив кылыңыз.