Стылізацыя праз атрыбут 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>

Дадзены абзац. Афарбуйце яго тэкст у зялёны колер, а яго фон - у жоўты.

Дадзены абзац. Зрабіце яго тэкст тлустым і курсіўным.