More than 3 years have passed since last update.

【Vue.js】条件付きレンダリング(v-if, v-else)

Last updated at 2020-12-29Posted at 2020-12-29

Vue.jsの条件付きレンダリングを行うための「v-if」,「v-else」についてまとめました。

【要約】

この記事では以下のステップ学んでいきます。

v-if
v-else
条件付きレンダリングの対象範囲

v-if

v-if ディレクティブは、要素(ブロック)を条件に応じて描画したい場合に使用されます。

ブロックは、ディレクティブの式が真を返す場合のみ描画されます。

v-ifの書き方

v-ifディレクティブは以下のように書きます。

<p v-if ="条件式">表示する文字</p>

v-else

v-elseは「v-ifで設定した条件に当てはまらない場合」にレンダリングするための要素です。

v-elseの書き方

v-else要素は、以下のようにv-ifまたはv-else-if要素の直後になければいけません。それ以外の場合は認識されません。

<p v-if ="条件式">表示する文字</p>
<p v-else>表示する文字</p>

v-if, v-elseを使用したサンプルコード

以下のような簡単なサンプルコードを用意しました。

年齢（age)が20以上だったら「成人です」と表示
年齢（age)が20以上ではない場合は「未成年です」と表示

条件分岐を行い、ブラウザに表示される文章を変えるプログラムです。

HTML側の記述

HTML側ではv-if, v-elseを用いて以下のように記述します。

v-if でageが20以上だったら「成人です」と表示するpタグを記述
v-else で ageが20以上ではない場合は「未成年です」と表示するpタグを記述

<div id="app">
  <p v-if="age >= 20">成人です</p>
  <p v-else>未成年です</p>
</div>

JS側の記述

JS側で以下のようにインスタンスを作成します。

const peaple = new Vue ({
  el: '#app',
  data:{
      age : '20'
  }
});

条件付きレンダリングの対象範囲

条件を付与した要素の中に子要素や孫要素がある場合、それらの要素もすべて条件付きレンダリングの対象となる特徴があります。

つまり、親要素に条件をつけることで子要素以下も一気にレンダリングの有無を、一括で切り替えることが出来ます。

【まとめ】

v-if は条件に合う場合にレンダリングする要素
v-else はv-ifの条件に当てはまらない場合レンダリングする要素

となります。

今回は直接HTMLに条件式を記述していますが、今後は条件を算出プロパティに記述してJSファイルで管理する方法も覚えてきたいと思います。

おつかれさまでした！