การแสดงผลตามเงื่อนไขใน Vue

คำสั่งต่อไปที่เราจะศึกษามีชื่อว่า v-if ด้วยความช่วยเหลือของมันคุณสามารถแสดง หรือซ่อนองค์ประกอบได้ วิธีที่คำสั่งนี้ ทำงาน: มันรับพารามิเตอร์ใดๆ ก็ได้ ของวัตถุ data ถ้าคุณสมบัตินี้ มีค่า true - องค์ประกอบจะถูก แสดง แต่ถ้า false - จะถูกซ่อน

มาดูตัวอย่างกัน สมมติว่าเรามีย่อหน้าที่มีแอตทริบิวต์ v-if ให้ค่าของแอตทริบิวต์นี้เป็นคุณสมบัติ visible แบบนี้:

<template>
	<p v-if="visible">text</p>
</template>

ลองตั้งค่าคุณสมบัติของเรา เป็น true ในกรณีนี้ ย่อหน้าจะถูกแสดง:

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

และถ้า visible ถูกตั้งค่าเป็น false ย่อหน้าจะถูกซ่อน:

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

สมมติว่าใน data มีคุณสมบัติ visible เก็บอยู่ สมมติว่าคุณยังมีย่อหน้าสองย่อหน้า สร้างให้ ย่อหน้าแรกแสดงบนหน้าจอ ถ้าคุณสมบัติ visible เท่ากับ true และย่อหน้าที่สองตรงกันข้าม ให้แสดงเมื่อคุณสมบัติ visible เท่ากับ false