Reaktiivne tingimus Vues

Teeme nii, et tingimus oleks reaktiivne. Näiteks teeme nii, et element peidab vajutamise peale nupul. Olgu meil järgmine lõik:

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

Teeme nii, et meie lõik algselt oleks nähtav:

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

Teeme nüüd nupu, mille vajutamise peale lõik peidetakse:

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

Seotud meetod muudab omadust visible väärtusele false, muutes sellega meie lõigu peidetuks:

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