Kondisi Reaktif di Vue

Mari kita buat kondisinya menjadi reaktif. Misalnya, kita buat agar elemen tersembunyi saat tombol ditekan. Anggaplah kita memiliki paragraf berikut:

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

Mari kita buat paragraf kita awalnya ditampilkan:

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

Sekarang buat tombol, yang ketika ditekan paragraf akan disembunyikan:

App.vue<template>
  <button @click="hide">sembunyikan</button>
  <p v-if="visible">text</p>
</template>

Metode terikat akan mengubah properti visible menjadi false, sehingga membuat paragraf kita tersembunyi:

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