Vueでの条件付き表示

次に学ぶディレクティブは v-ifです。これを使用して要素を表示または非表示にすることができます。このディレクティブの仕組みは、パラメータとしてdataオブジェクトの任意のプロパティを受け取ります。そのプロパティの値がtrueの場合、要素は表示され、falseの場合は非表示になります。

例を見てみましょう。 v-if属性を持つ段落があるとします。この属性の値は、visibleプロパティとします。以下の通りです：

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

プロパティの値をtrueに設定してみましょう。この場合、段落は表示されます：

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

一方、visibleの値をfalseに設定すると、段落は非表示になります：

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

dataにvisibleプロパティが格納されているとします。また、2つの段落があるとします。visibleプロパティがtrueの場合に最初の段落が画面に表示され、逆にvisibleプロパティがfalseの場合に2番目の段落が表示されるようにしてください。