Vueでの要素のトグル

次に、段落をトグルするボタンを作ってみましょう。つまり、最初のクリックで表示し、2回目のクリックで非表示にします。これを行うには、ボタンをクリックしたときに toggle メソッドを呼び出します：

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

メソッドのコードでは、プロパティ visible の値を取得し、その反対の値に反転させる必要があります：

toggle: function() {
	this.visible = !this.visible;
}

3つの段落と3つのボタンが与えられています。それぞれのボタンが自分の段落をトグルするようにしてください。