การกำหนดสไตล์ผ่านแอตทริบิวต์ 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>

มีย่อหน้าให้ กำหนดสีข้อความเป็นสีเขียว และพื้นหลังเป็นสีเหลือง

มีย่อหน้าให้ ทำให้ข้อความของมัน เป็นตัวหนาและตัวเอียง