Vue'da style Özniteliği ile Stilleme

CSS stilleri doğrudan style özniteliği aracılığıyla eklenebilir. Bunun için, özniteliğe, istenen CSS özelliklerinin bu nesnenin anahtarları, ve karşılık gelen CSS özellik değerlerinin ise bu nesnenin değerleri olması gereken bir nesne iletilir.

Örnek olarak bir paragrafı kırmızı renge boyayalım ve yeşil renkte bir kenarlık ekleyelim:

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

Şimdi onun yerine kenarlığı kaldırıp font-size değerini 30px olarak ayarlayalım. Nesnede tire içeren bir anahtar olamayacağı için, onu tırnak içine almamız gerekir:

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

font-size yerine fontSize da yazılabilir - bu da çalışacaktır:

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

Bir paragraf verilmiştir. Metnini yeşil renge, arka planını ise sarı renge boyayın.

Bir paragraf verilmiştir. Metnini kalin ve italik yapın.