Reaktivní podmínka ve Vue

Pojďme zařídit, aby podmínka byla reaktivní. Uděláme například tak, aby se prvek skrýval po kliknutí na tlačítko. Předpokládejme, že máme následující odstavec:

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

Uděláme tak, aby byl náš odstavec zpočátku zobrazen:

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

Vytvořme nyní tlačítko, po jehož kliknutí se odstavec skryje:

<template>
	<button @click="hide">skrýt</button>
	<p v-if="visible">text</p>
</template>

Spojená metoda změní vlastnost visible na false, čímž způsobí, že náš odstavec zmizí:

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

Je dán odstavec a tlačítko. Nechť je odstavec zpočátku skrytý. Vytvořte tlačítko, které odstavec zobrazí.

Jsou dány odstavec a dvě tlačítka. Nechť první tlačítko zobrazí odstavec, a druhé - skryje jej.

Upravte předchozí úlohu tak, aby na obrazovce byla vždy vidět pouze jedna z tlačítek: pokud je odstavec zobrazen, pak tlačítko pro skrytí, a pokud je skryt - pak tlačítko pro zobrazení.