Vueにおけるリアクティブな条件

条件をリアクティブにしてみましょう。例えば、ボタンをクリックすると要素が非表示になるようにします。次の段落があるとします：

<template>
	<p v-if="visible">テキスト</p>
</template>

この段落が最初に表示されるようにしてみましょう：

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

ここで、クリックすると段落が非表示になるボタンを作ります：

<template>
	<button @click="hide">非表示</button>
	<p v-if="visible">テキスト</p>
</template>

バインドされたメソッドは、プロパティ visibleをfalseに変更し、それによって段落を非表示にします：

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

段落とボタンがあります。段落は最初は非表示にしてください。段落を表示するボタンを作成してください。

段落と2つのボタンがあります。最初のボタンは段落を表示し、 2番目のボタンは非表示にするようにしてください。

前のタスクを変更して、画面上に常に 1つのボタンのみが表示されるようにしてください：段落が表示されている場合は非表示用のボタン、非表示の場合は表示用のボタンです。