Vue-те style атрибуты арқылы стильдеу

CSS стильдерін тікелей style атрибуты арқылы қосуға болады. Бun үшін атрибутқа объект беріледі, онда қажетті 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>

Абзац берілген. Оның мәтінін жасыл түске бояңыз, ал оның фонын - сары түске.

Абзац берілген. Оның мәтінін қалың және курсивті етіңіз.