เงื่อนไขที่ซับซ้อนใน Vue

ในคำสั่ง v-if เราสามารถสร้าง เงื่อนไขที่ซับซ้อนขึ้นได้ ตัวอย่างเช่น สมมติว่าคุณสมบัติ num อาจมีค่า เป็นตัวเลข 1, 2 หรือ 3:

data() {
	return {
		num: 3, // สมมติว่าตอนนี้ค่าเป็น 3
	}
}

ตอนนี้เรามาสร้างสามย่อหน้า โดยที่ จะแสดงเพียงย่อหน้าเดียว ขึ้นอยู่กับค่าของ คุณสมบัติ num:

<template>
	<p v-if="num === 1">หนึ่ง</p>
	<p v-if="num === 2">สอง</p>
	<p v-if="num === 3">สาม</p>
</template>

เรายังสามารถสร้างเงื่อนไขที่ซับซ้อนกว่านี้ได้:

<template>
	<p v-if="num === 1 || num === 3">
		หนึ่งหรือสอง
	</p>
</template>

กำหนดคุณสมบัติ day ซึ่งบันทึก วันในสัปดาห์ปัจจุบัน และคุณมี เจ็ดย่อหน้า โดยในแต่ละย่อหน้าเขียน ชื่อวันในสัปดาห์ไว้ ทำให้บนหน้าจอ ปรากฏเฉพาะย่อหน้าที่มีชื่อ ของวันในสัปดาห์ปัจจุบัน