Syarat Reaktif dalam Vue

Mari kita jadikan syarat itu reaktif. Sebagai contoh, mari kita buat supaya elemen disembunyikan apabila butang ditekan. Katakan kita mempunyai perenggan berikut:

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

Mari kita buat supaya perenggan kita pada asalnya dipaparkan:

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

Sekarang mari buat butang, yang apabila ditekan akan menyembunyikan perenggan:

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

Kaedah terikat akan menukar sifat visible kepada false, sekali gus menyebabkan perenggan kita disembunyikan:

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