ปฏิกิริยาของวัตถุที่มีคลาส CSS ใน Vue

วัตถุที่มีคลาส CSS นั้นมีวัตถุประสงค์ เพื่อให้สามารถกำหนดคลาสให้กับองค์ประกอบต่างๆ ได้อย่างสะดวกผ่านระบบปฏิกิริยา มาดูกันว่าสิ่งนี้ทำได้อย่างไร สมมติว่าเรามีวัตถุ ที่มีคลาสดังต่อไปนี้:

data() {
	return {
		styles: {
			done: false,
		},
	}
}

ผูกวัตถุนี้กับแท็ก:

<template>
	<p :class="styles">ข้อความ</p>
</template>

สมมติว่าการมีคลาส done ขีดฆ่าข้อความของแท็ก:

p.done {
	text-decoration: line-through;
}

สร้างปุ่มที่การคลิก จะเปลี่ยนวัตถุที่มีสไตล์ โดยเปิดใช้งานคลาส done:

<template>
	<button @click="setDone">ซ่อน</button>
</template>

เขียนเมธอดที่เกี่ยวข้อง:

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

ให้มีวัตถุที่มีคลาส CSS ดังต่อไปนี้:

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

สมมติว่าการมีคลาสนี้ ซ่อนองค์ประกอบ:

p.hidden {
	display: none;
}

นำวัตถุที่มีคลาสไปใช้ กับแท็กที่มีข้อความบางอย่าง

สร้างปุ่มที่การคลิก จะแสดงองค์ประกอบ

สร้างปุ่มที่การคลิก จะซ่อนองค์ประกอบ

สร้างปุ่มที่การคลิก จะสลับสถานะองค์ประกอบ (แสดง, หากถูกซ่อน; ซ่อน, หากถูกแสดง)