Styling Melalui Atribut style di Vue

CSS style dapat ditambahkan langsung melalui atribut style. Untuk ini, sebuah objek diteruskan ke atribut, di mana properti CSS yang diinginkan harus menjadi kunci dari objek ini, dan nilai yang sesuai dari properti CSS - menjadi nilai dari objek ini.

Mari kita contohnya warnai suatu paragraf dengan warna merah dan tambahkan border hijau:

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

Sekarang mari kita atur font-size menjadi 30px untuknya, alih-alih border. Karena dalam objek tidak boleh ada kunci dengan tanda hubung, kita harus memasukkannya ke dalam tanda kutip:

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

Anda juga bisa menulis fontSize sebagai ganti font-size - ini juga akan berfungsi:

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

Diberikan sebuah paragraf. Warnai teksnya menjadi hijau dan latar belakangnya - menjadi kuning.

Diberikan sebuah paragraf. Buat teksnya menjadi tebal dan miring.