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:

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

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

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

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

<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:

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

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

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

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.