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:

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

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

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

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

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

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

Daný je odsek a tlačidlo. Nech je odsek spočiatku skrytý. Vytvorte tlačidlo, ktoré odsek zobrazí.

Daný je odsek a dve tlačidlá. Nech prvé tlačidlo zobrazí odsek, a druhé - skryje ho.

Upravte predchádzajúcu úlohu tak, aby na obrazovke bola vždy viditeľná iba jedna tlačidlá: ak je odsek zobrazený, tak tlačidlo na skrytie, a ak je skrytý - tak tlačidlo na zobrazenie.