სტილიზაცია 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>

მოცემულია აბზაცი. გააფერადეთ მისი ტექსტი მწვანე ფერში, ხოლო მისი ფონი - ყვითელ ფერში.

მოცემულია აბზაცი. გახადეთ მისი ტექსტი მსხვილი და დახრილი.