Vue-da style atributi orqali stil berish

CSS stillarini to'g'ridan-to'g'ri style atributi orqali qo'shish mumkin. Buning uchun atributga ob'ekt uzatiladi, unda kerakli CSS xususiyatlari shu ob'ektning kalitlari bo'lishi kerak, va mos keladigan CSS xususiyatlarining qiymatlari - shu ob'ektning qiymatlari bo'ladi.

Keling, misol uchun biron bir paragraf matnini qizil rangga bo'yaylik va unga yashil rangli chegara qo'shamiz:

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

Keling, endi chegara o'rniga unga font-size ni 30px ga o'rnatamiz. Chunki ob'ektda defisli kalit bo'lishi mumkin emas, biz uni qo'shtirnoq ichiga olishimiz kerak:

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

font-size o'rniga fontSize yozish ham mumkin - bu ham ishlaydi:

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

Paragraf berilgan. Unga matnini yashil rangga, fonini sariq rangga bo'yang.

Paragraf berilgan. Unga matnni qalin va kursiv qiling.