Стилизация чрез атрибут style във 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>

Даден е абзац. Оцветете текста му в зелен цвят, а фона му - в жълт.

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