Stilizimi përmes atributit style në Vue

Stilet CSS mund të shtohen direkt përmes atributit style. Për këtë, në atribut kalojmë një objekt, në të cilin vetitë e dëshiruara CSS duhet të jenë çelësat e këtij objekti, dhe vlerat përkatëse të vetive CSS - vlerat e këtij objekti.

Le të shembull të ngjyrosim një paragraf në ngjyrë të kuqe dhe t'i shtojmë një kufi në ngjyrë të gjelbër:

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

Tani, në vend të kufirit, le t'i caktojmë font-size në 30px. Meqenëse në një objekt nuk mund të ketë çelës me vizë, ne duhet ta vendosim atë në thonjëza:

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

Mund të shkruhet gjithashtu fontSize në vend të font-size - edhe kjo do të funksionojë:

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

Është dhënë një paragraf. Ngjyrosni tekstin e tij në të gjelbër dhe sfondin e tij - në të verdhë.

Është dhënë një paragraf. Bëjeni tekstin e tij të trashë dhe të pjerrët (italic).