Reaktív feltétel Vue-ban

Tegyük reakcióképesé a feltételt. Például úgy, hogy egy elem elrejtődjön egy gomb megnyomására. Tegyük fel, hogy van a következő bekezdésünk:

App.vue<template>
  <p v-if="visible">szöveg</p>
</template>

Tegyük úgy, hogy a bekezdésünk kezdetben látható legyen:

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

Készítsünk most egy gombot, amelyre kattintva a bekezdés elrejtődjön:

App.vue<template>
  <button @click="hide">elrejt</button>
  <p v-if="visible">szöveg</p>
</template>

A hozzá kötött metódus megváltoztatja a visible tulajdonságot false-ra, ezáltal elrejtve a bekezdést:

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

Задание 1

Adott egy bekezdés és egy gomb. Legyen a bekezdés kezdetben elrejtve. Készítsen egy gombot, ami megjeleníti a bekezdést.

Задание 2

Adott egy bekezdés és két gomb. Legyen az első gomb megjeleníti a bekezdést, a második pedig elrejti azt.

Задание 3

Módosítsa az előző feladatot úgy, hogy a képernyőn mindig csak az egyik gomb legyen látható: ha a bekezdés látható, akkor az elrejtés gombja, ha elrejtett, akkor a megjelenítés gombja.