Reaktivni pogoj v Vue

Naredimo tako, da je pogoj reaktiven. Na primer, naredimo tako, da se element skrije ob kliku na gumb. Naj imamo naslednji odstavek:

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

Naredimo tako, da je naš odstavek sprva prikazan:

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

Naredimo zdaj gumb, ob kliku na katerega se bo odstavek skril:

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

Povezana metoda bo spremenila lastnost visible v false, s čimer se bo naš odstavek skril:

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