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

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

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

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

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

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

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

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

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