Reaktyvi sąlyga Vue

Padarykime, kad sąlyga būtų reaktyvi. Pavyzdžiui, padarykime kad elementas pasislėptų paspaudus mygtuką. Tarkime, kad turime tokį paragrafą:

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

Padarykime, kad mūsų paragrafas iš pradžių būtų rodomas:

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

Dabar sukurkime mygtuką, kurį paspaudus paragrafas pasislėps:

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

Susietas metodas pakeis savybę visible į false, taip privers mūsų paragrafą pasislėpti:

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