Стилизација преку атрибутот style во Vue

CSS стиловите може директно да се додаваат преку атрибутот style. За ова, во атрибутот се пренесува објект, во кој посакуваните CSS својства треба да бидат клучеви на овој објект, а соодветните вредности на CSS својствата - вредности на овој објект.

Ајде за пример да обоime некој пасус со црвена боја и да додадеме граница со зелена боја:

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

Ајде сега наместо граница да му поставиme font-size на 30px. Бидејќи во објектот не може да има клуч со цртичка, ние мора да го ставиme во наводници:

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

Може исто така наместо font-size да се напише fontSize - ова исто така ќе работи:

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

Даден е пасус. Обојте го неговиот текст во зелена боја, а неговиот фон - во жолта.

Даден е пасус. Направете го неговиот текст задебелен и курзивен.