Vue.jsにおけるディレクティブの一つである「v-if」について詳しくみていきます。
使い方を確認後に実際にサンプルプログラムを書いていきます。
Vue.jsにおけるv-ifの役割
「v-if」はVue.jsのテンプレート内で、値や計算結果の状態によってある要素を表示させたり、または消したりしたい場合に使用していきます。
同じようなディレクティブとしては「v-show」がありますが、両者の違いは以下のようなものになります。
「v-if」の場合は、消える時に要素そのものがなくなります。表示する時は再構築(作成)されます。
「v-show」の場合は、CSSの「display」による操作なので、要素そのものがなくなることはありません。
そのため、「v-if」を使用すると切り替え時にコストが多くかかりますが、初期表示が非表示であれば初期表示は早くなります。
「v-show」を使用すると要素自体は存在するので初期表示は遅くなりますが、切り替え時のコストが少なくなります。
変更の頻度や初期表示によってどちらを使用するべきか決めていきましょう。
v-ifの使い方
「v-if」の使い方は以下の通りです。
<要素1 v-if="式または値"> </要素1> <要素2 v-else-if="式または値"> </要素2> <要素3 v-else="式または値"> </要素3>
v-ifを使ってみる
早速「v-if」を使用してみます。
今回は、ボタンを押すたびにカウンターを回して、3未満なら「小さいです」、3〜5であれば「ちょうどいいです」、6以上であれば「大きすぎます」という表示をするプログラムを作成していきます。
Home.vueに押すとカウントアップするボタンとカウントの表示、そして「v-if」を使用し文言を表示します。
<template>
<div class="home">
<button @click="onClick">カウントアップ</button>
<p>現在のカウント:{{ counter }}</p>
<div v-if="counter < 3">
小さいです
</div>
<div v-else-if="counter >= 3 && counter <= 5">
ちょうどいいです
</div>
<div v-else>
大きすぎます
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Home extends Vue {
private counter = 0;
private onClick() {
this.counter++;
}
}
</script>
5行目で「v-if」を使用して3未満の場合はにこの要素が表示されるようにしてます。
8行目で「v-else-if」を使用して3以上5以下の場合はにこの要素が表示されるようにしてます。
最後に11行目で「v-else」を使用して、それ以外の場合はこの要素が表示されるようにしてます。
複数要素に対して「v-if」を使用する場合
複数の要素に対して「v-if」を使用したい場合(例えば、h2要素とp要素をv-ifで表示制御したい場合)は、「template」タグを使用することで余分なタグを増やすことなく表示を制御することができます。
具体的には以下のように書きます。
<template>
<div>
<template v-if="式または値">
<要素></要素>
<要素></要素>
</template>
</div>
</template>
このtemplateタグは描画されません。
divなどを使用して実現する場合は不要な要素が表示されてしまうので注意しましょう。