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

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

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

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

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

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

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

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