Рэактыўная ўмова ў Vue

Давайце зробім так, каб умова была рэактыўнай. Напрыклад зробім так, каб элемент хаваўся па націсканні на кнопку. Хай у нас ёсць наступны абзац:

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

Зробім так, каб наш абзац першапачаткова быў паказаны:

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

Зробім цяпер кнопку, па націсканні на якую абзац будзе хавацца:

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

Прывязаны метад будзе мяняць ўласцівасць visible на false, тым самым прымушаючы наш абзац схавацца:

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

Дадзены абзац і кнопка. Хай абзац першапачаткова схаваны. Зрабіце кнопку, якая будзе паказваць абзац.

Дадзены абзац і дзве кнопкі. Хай першая кнопка паказвае абзац, а другая - хавае яго.

Мадыфікуйце папярэднюю задачу так, каб на экране заўсёды была бачная толькі адна з кнопак: калі абзац паказаны, то кнопка для схавання, а калі схаваны - то кнопка для паказу.