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

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>

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

Дато је неко слово. Направите да му текст буде поддебљан и искошен.