• Vue.js

Vue.jsでif文を使い条件分岐する方法

Vue.jsでif文を使い条件分岐する方法を知りたい。

また、条件が複数ある場合の記述方法も知りたい。

本記事ではこの様な悩みを解決します。

v-ifで条件分岐

<div id="app">
	<div v-if="age < 18">未成年です。</div>
</div>
<script>
	const app = Vue.createApp({
		data() {
			return {
				age: 17
			}
		},
	});
	app.mount("#app");
</script>

Vue.jsでif文を使い条件分岐するコード例です。

データメソッドで定義されてるageの値が18以下だったら、未成年と表示してます。

Vue.jsで条件分岐するにはv-if属性を使います。

使い方は以下の通りです。

v-if=”条件分岐”

条件分岐させたいHTMLタグ内に上記v-if属性を設定。

値に演算子を使って条件を指定すればOKです。

条件に一致すればHTMLタグ内の文字列が表示されます。

複数条件分岐したい場合

<div id="app">
	<div v-if="age < 18">未成年です。</div>
	<div v-else-if="age > 17">成人です。</div>
	<div v-else >年齢を入れてください。</div>
</div>
<script>
	const app = Vue.createApp({
		data() {
			return {
				age: 17
			}
		},
	});
	app.mount("#app");
</script>

if文で複数の条件を指定し、分岐したい場合のコード例です。

データメソッドで定義されてるageの値が18以下は【未成年】、18以上は【成人】、それ以外の値（数値以外）は【年齢を入力してください】と表示されます。

if文で複数条件分岐したい場合はv-else-if属性、v-else属性を使います。

上記属性を使う事で、v-ifの条件に一致しなければ、v-else-ifの条件、双方一致しなければ、v-else属性を表示するという複数条件分岐が可能になります。

まとめ

Vue.jsでif文を使い条件分岐する方法、また複数の条件を指定し、分岐する方法について紹介しました。

以上で解説を終わります。