เงื่อนไขแบบรีแอคทีฟใน Vue

ลองมาทำให้เงื่อนไข เป็นแบบรีแอคทีฟกัน ตัวอย่างเช่น ลองทำให้ องค์ประกอบซ่อนตัวเมื่อคลิกปุ่ม สมมติว่าเรามีย่อหน้าดังต่อไปนี้:

<template>
	<p v-if="visible">ข้อความ</p>
</template>

มาทำให้ย่อหน้าของเรา แสดงผลตั้งแต่เริ่มต้น:

data() {
	return {
		visible: true,
	}
}

ตอนนี้มาสร้างปุ่ม เมื่อคลิก ที่ปุ่ม ย่อหน้าจะถูกซ่อน:

<template>
	<button @click="hide">ซ่อน</button>
	<p v-if="visible">ข้อความ</p>
</template>

เมธอดที่ผูกไว้จะเปลี่ยน คุณสมบัติ visible เป็น false, ทำให้ย่อหน้าของเรา ซ่อนตัว:

methods: {
	hide: function() {
		this.visible = false;
	}
}

มีย่อหน้าและปุ่มหนึ่งปุ่ม ให้ย่อหน้า ถูกซ่อนตั้งแต่เริ่มต้น สร้างปุ่ม ที่เมื่อคลิกจะแสดงย่อหน้า

มีย่อหน้าและสองปุ่ม ให้ ปุ่มแรกแสดงย่อหน้า และปุ่มที่สอง - ซ่อนมัน

ปรับเปลี่ยนโจทย์ก่อนหน้า โดยที่ บนหน้าจอจะมีปุ่มให้เห็นเพียงปุ่มเดียวเสมอ: หากย่อหน้าแสดงผล ก็จะเป็นปุ่มสำหรับ ซ่อน และหากซ่อนอยู่ - ก็จะเป็นปุ่มสำหรับแสดง