v-ifはHTMLタグ内で条件分岐を行うことができるディレクティブです。
v-ifを利用することで、指定した条件によって表示を簡単に出し分けられるようになります。
今回はVue.jsのディレクティブの中でも基本となるv-if の使い方についてVue.js公式パートナーであるSkilledが分かりやすく解説していきます。
目次
v-ifの利用方法について
v-ifは以下のような条件によって表示を出し分けたい時に利用することができます。
See the Pen
Untitled by Igami (@IGA_REST)
on CodePen.
このようにv-if="条件式"
を指定することで、表示の制御を行うことができます。
v-elseとv-else-if
v-ifと一緒に、v-elseとv-else-ifディレクティブも使用できます。これらはJavaScriptのelseとelse ifステートメントと同じように動作します。
上記で指定したコードの中でもv-else-ifとv-elseを以下のように併用していました。
<div class="time morning" v-if="time % 3 === 0">
Good Morning
</div>
<div class="time afternoon" v-else-if="time % 3 === 1">
Good Afternoon
</div>
<div class="time evening" v-else>
Good Evening
</div>
JavaScriptのif と同じようにv-if の条件が真だった場合はv-else-if, v-elseの判定は実施されません。
v-elseは全ての条件に合致しなかった場合のみ呼ばれるようになっています。
条件が変更された時の挙動
v-ifの特徴は条件に含まれている値が変更された時に自動で検知し条件について再評価を行ってくれることです。
今回紹介したコードではボタンを押すと、条件式に使用している time 変数が更新されるようになっていました。
<template>
<main>
<div class="container">
<div class="time morning" v-if="time % 3 === 0">
Good Morning
</div>
<div class="time afternoon" v-else-if="time % 3 === 1">
Good Afternoon
</div>
<div class="time evening" v-else>
Good Evening
</div>
<p class="change-btn" @click="changeTime">Change Time</p>
</div>
</main>
</template>
<script setup>
import { ref } from "vue";
const time = ref(0);
const changeTime = () => {
time.value++
}
</script>
... styleは省略
上記が今回の画面のコードになりますが、ボタンを押すことで `changeTime` 関数が実行されボタンを押すごとにtime 変数の値が増加するようになっています。
v-ifの挙動として、条件にリアクティブな値が指定されている場合はその値に変更があった場合に自動で検知し条件に従って再判定を行うようになっています。
そのため、ボタンを押すごとに条件の再判定が行われ、Viewの切り替えを行うことができるようになっています。
変化前
変化後
v-if にリアクティブな値ではない変数を指定した場合
先程の解説では、リアクティブな値が更新された時はv-ifの条件が再判定されると説明しました。
では、リアクティブな値ではなかった場合はどうでしょうか。
リアクティブな値ではないというのは、例えば以下のコードです。
例えば、以下のコードを見てみましょう。
<template>
<main>
<div class="container">
<div class="time morning" v-if="time % 3 === 0">
Good Morning
</div>
<div class="time afternoon" v-else-if="time % 3 === 1">
Good Afternoon
</div>
<div class="time evening" v-else>
Good Evening
</div>
<p class="change-btn" @click="changeTime">Change Time</p>
</div>
</main>
</template>
<script setup>
let time = 0;
const changeTime = () => {
time.value++
}
</script>
... styleは省略
上記のコードのでは time変数に直接0が代入されており、ref関数を指定していないのでこの変数はリアクティブな値になっていません。
このリアクティブな値でない変数を更新した場合、v-ifディレクティブは値の更新を検知することができません。
そのため、ボタンを押しても画面に変化が起こることはありません。
このようにv-ifで変数を用いて条件分岐を行う場合は変数はリアクティブな値にしておかなければいけないということを覚えておきましょう。
v-show とは？
v-showとはv-ifと同じ条件分岐を行うことができるディレクティブです。
以下のようにすることで、v-showでも条件によって表示、非表示の制御を行うことができます。
See the Pen
v-show by Igami (@IGA_REST)
on CodePen.
注意すべき点はv-showには以下の特徴があります。
- 単一の条件式のみしか扱えない
- displayプロパティで制御されるので、非表示でもDOMは生成される
という点です。それぞれみていきましょう。
単一の条件式のみしか扱えない
v-ifでは v-eles-if, v-else を使って複数の条件式、全てに合致しない場合での表示を判断することができました。
しかし、v-showではv-else-if などの別のディレクティブは用意されておらず単一の条件でしか扱うことができません。
displayプロパティで制御されるので、非表示でもDOMは生成される
v-ifは条件式が真だった場合にv-if以下のDOMを生成するという仕組みになっています。
しかし、v-showは条件が真か偽に関わらずDOMを生成し、displayプロパティを用いて表示の制御を行います。
具体的にはv-showの条件が false だった場合はv-showには以下のようにdisplay: none; の値をv-showを設定したタグに付与し表示の制御を行っています。
【v-showの値がfalseだった場合のコード】
<div class="time morning" style="display: none">
Good Morning
</div>
v-if と v-showの違い
v-ifとv-showの違いは表示を制御する方法になります。
v-if は、条件が真であった場合にDOMを生成し、偽であった場合はDOMを生成していれば削除します。
v-showについては、条件の真偽に関わらずDOMを初めに生成し、displayプロパティを使い表示の制御を行います。
使い分けの判断としては
- v-if: 過度に表示が切り替えずに条件が複数ある場合など
- v-show: ボタンで表示を切り替えるなど過度に表示が切り替わる場合など
があります。
例えば、ユーザーの課金情報を見て表示を切り替えたいケースには v-ifを使用します。
ユーザーの課金情報自体はその画面上で頻繁に切り替わる訳ではなく、多くてもその場では1度だと思います。
この場合課金情報を条件としていも過度に切り替わらないかつ、条件がfalseであればDOMも生成することはないので、表示されるパフォーマンスは良くなります。
v-showの利用用途としてはフォームのバリデーションエラーの表示などでよく利用されます。
バリデーションエラーは入力されている状況によって表示、非表示が過度に切り替わります。
この場合v-ifを利用していると、エラーの表示の度にDOMの削除、生成が行われ効率が悪くユーザービリティも損なわれます。
v-showであれば、display: none; が付与する、しないだけになるので、パフォーマンスよくなります。
v-ifとv-showの使い分けは画面内で過度に表示の制御が行われるかで判断してみてください。
フロントエンドを学習するならSkilled(スキルド)
スキルドではフロントエンド専門の実践特化型のプログラミング学習サービスです。
コーディングからフロントエンジニアまでの学習をカバーしており、コーディングしながら実践的に学習することで知識ではなく『スキル』が身につけられるサービスとなっております。
現在無料体験キャンペーンを行っていますので、気になる方はぜひ無料体験を利用してみてください。
