Vue-ում style ատրիբուտի միջոցով սթայլավորում

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>

Տրված է պարբերություն։ Ներկեք դրա տեքստը կանաչ գույնով, իսկ դրա ֆոնը՝ դեղին։

Տրված է պարբերություն։ Դարձրեք դրա տեքստը հաստ և շեղագիր։