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

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

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

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

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

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

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