Reaktívna podmienka vo Vue

Urobme podmienku reaktívnou. Napríklad, aby sa prvok skrýval po kliknutí na tlačidlo. Majme nasledujúci odsek:

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

Urobme tak, aby bol náš odsek spočiatku zobrazený:

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

Vytvorme teraz tlačidlo, po kliknutí na ktoré sa odsek skryje:

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

Naviazaná metóda zmení vlastnosť visible na false, čím spôsobí skrytie nášho odseku:

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