การสลับการแสดงผลขององค์ประกอบใน Vue

ตอนนี้มาสร้างปุ่มที่จะสลับการแสดงผลของย่อหน้า กล่าวคือคลิกครั้งแรกเพื่อแสดง และคลิกครั้งที่สองเพื่อซ่อน ในการทำเช่นนี้ เมื่อคลิกที่ปุ่ม เราจะเรียกใช้เมธอด toggle:

App.vue<template>
  <button @click="toggle">สลับ</button>
  <p v-if="visible">ข้อความ</p>
</template>

ในโค้ดของเมธอด จะต้องนำค่า ของพรอพเพอร์ตี้ visible มาและกลับค่าเป็นค่าตรงกันข้าม:

javascripttoggle: function() {
  this.visible = !this.visible;
}