อ็อบเจ็กต์ที่มีคลาส CSS ใน Vue

คลาส CSS สามารถจัดเก็บอยู่ในอ็อบเจ็กต์ได้เช่นกัน ในกรณีนี้ชื่อคลาสจะเป็นคีย์ของอ็อบเจ็กต์ และสมาชิกของอ็อบเจ็กต์จะเป็นค่าบูลีน ถ้าค่าเป็น true คลาสนั้นจะถูกเพิ่มเข้าไปในองค์ประกอบ และถ้าเป็น false ก็จะไม่ถูกเพิ่ม

ลองมาทดลองปฏิบัติกัน สมมติว่าเรามีอ็อบเจ็กต์ที่มีคลาสดังต่อไปนี้:

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

ผูกอ็อบเจ็กต์นี้กับแท็ก:

<template>
	<p :class="obj">text</p>
</template>

ได้รับอ็อบเจ็กต์ที่มีคลาส CSS ดังต่อไปนี้:

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

นำคลาสเหล่านี้ไปใช้กับแท็กใดแท็กหนึ่ง ตรวจสอบว่าคลาสใดถูกนำไปใช้ และคลาสใดไม่ได้ถูกนำไปใช้