v-ifディレクティブでHTML要素の表示・非表示を制御する [Vue.js]

本記事では、Vue.jsのv-ifディレクティブについて紹介します。

1 v-ifディレクティブ
2 v-ifディレクティブの書式
3 v-ifディレクティブの動作
- 3.1 v-ifの指定がfalseの場合
- 3.2 v-ifの指定がtrueの場合
4 v-showディレクティブとの違い
5 v-ifディレクティブの使用例

v-ifディレクティブ

v-ifディレクティブはv-showディレクティブと同様にHTML要素の表示状態（表示・非表示）を切り替えるために使用します。

v-ifディレクティブの書式

v-ifディレクティブは以下の書式で使用します。

<要素名 v-if="値または式" />

1	<要素名 v-if="値または式" />

「値または式」には、trueまたはfalseの真偽値で表されるboolean型となる値または式を指定します。

値にはdataオプションに定義したプロパティや、computedオプションに定義したプロパティを指定します。
式にはmethodsオプションに定義したプロパティを「プロパティ名()」の関数呼び出し形式で指定します。また、HTMLテンプレートに直接式を指定することもできます。例えばdataオプションにvalueというプロパティが定義されており、valueが「1」かどうかを式に指定する場合は「value === 1」という式になります。

v-ifディレクティブの動作

v-ifディレクティブは、HTML要素の表示・非表示をHTMLそのものの出力を制御することで切り替えています。

v-ifディレクティブに指定する値または式の値が「falsy」（false, 0, -0, ”, null, undefined, NaNのいずれか）であれば「style=”display: none;”」が要素に付与されます。その逆に「truthy」であれば「style=”display: none;”」が要素から削除されます。

v-ifの指定がfalseの場合

v-ifの指定（false）

<div id="app">
  <div v-if="false"></div>
</div>

</div>

出力されるHTML

<div id="app">
  <!---->
</div>

</div>

v-ifの指定がtrueの場合

v-ifの指定（true）

<div id="app">
  <div v-if="true"></div>
</div>

</div>

出力されるHTML

<div id="app">
  <div></div>
</div>

</div>

v-showディレクティブとの違い

v-ifディレクティブは、HTML要素の表示・非表示の状態をHTMLを出力するかどうかで制御しています。
HTML要素の表示・非表示をCSSのdisplayプロパティを変更することで実現しているv-showディレクティブとは、HTML要素の有無が違います。
v-showディレクティブは、一度出力した要素のスタイル（CSS）を切り替えることで表示状態を切り替えていますので、描画不可が高くありませんが、v-ifディレクティブはHTML要素そのものを出力するかどうかで制御していますので、v-showディレクティブに比べて描画不可が高くなります。

v-ifディレクティブとv-showディレクティブの使い分け

v-ifディレクティブとv-showディレクティブの使い分けは、表示・非表示の切り替えの頻度が高いかどうか決めるのが一般的です。
表示と非表示を頻繁に切り替える必要があればv-showディレクティブを使用します。逆に表示・非表示の切り替え頻度が低い要素であればv-ifディレクティブを使用します。

v-ifディレクティブでしか実現できないこと

v-ifディレクティブに比べると、v-showディレクティブの方が描画不可が低いのであれば、v-ifディレクティブを使用する必要がないように思いますが、v-showディレクティブではできないことが、v-ifディレクティブでは実現できます。
それが、ディレクティブに指定した要素の表示する条件の値または式が偽（false）の場合の動作を指定することができる点です。
v-ifディレクティブでは、続くディレクティブとしてv-elseディレクティブと、v-else-ifディレクティブが使用できます。
v-if、v-else、v-else-ifの各ディレクティブは、JavaScriptのif ～ elseif ～ elseと同様の意味合いを持ちます。

v-elseディレクティブとv-else-ifディレクティブ

v-elseディレクティブは、v-ifディレクティブで指定した表示有無条件を満たさない場合に表示するHTML要素に指定します。

<div v-if="表示条件の値または式"><div>
<div v-else><div>

1 2	<div v-if="表示条件の値または式"><div> <div v-else><div>

v-elseディレクティブは、v-ifディレクティブを指定した要素の後に1度だけ指定することができます。
v-elseディレクティブでは、値や式を指定することはなく「v-else」のみを使用します。

v-else-ifディレクティブは、v-ifディレクティブで指定した表示有無条件を満たさない場合に、さらに表示有無条件を指定するHTML要素を続ける場合に指定します。

<div v-if="表示条件の値または式1"><div>
<div v-else-if="表示条件の値または式2"><div>
<div v-else><div>

v-else-ifディレクティブは複数指定することができます。

<div v-if="表示条件の値または式1"><div>
<div v-else-if="表示条件の値または式2"><div>
<div v-else-if="表示条件の値または式3"><div>
<div v-else-if="表示条件の値または式4"><div>
<div v-else-if="表示条件の値または式5"><div>
<div v-else><div>

v-elseディレクティブとv-else-ifディレクティブは、v-ifディレクティブに対応するディレクティブなので、v-ifディレクティブを指定したHTML要素の直後のHTML要素でのみ使用することができます。

v-ifディレクティブの使用例

ここではv-ifディレクティブを使用して、HTML要素の表示状態（表示と非表示）を切り替える例を示します。

v-ifディレクティブのみ

dataオプションに定義したプロパティを表示するかどうかを指定する条件に使用して、HTMLテンプレートのdiv要素にv-ifディレクティブを適用する例を示します。

JavaScript

Vue.createApp({
  data: function() {
    return {
      isVisible: true
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

isVisible: true

}

}).mount('#app')

HTML

<div id="app">
  <div v-if="isVisible">v-ifディレクティブを指定した要素</div>
  <button v-on:click="isVisible = !isVisible">表示有無切り替え</button>
</div>

<div v-if="isVisible">v-ifディレクティブを指定した要素</div>

<button v-on:click="isVisible = !isVisible">表示有無切り替え</button>

</div>

上記の例では、dataオプションに定義したisVisibleプロパティの値がtrueの場合にv-ifディレクティブを指定したdiv要素が表示されます。

v-ifとv-elseディレクティブ

v-ifディレクティブに続けてv-elseディレクティブを指定する例を以下に示します。

JavaScript

Vue.createApp({
  data: function() {
    return {
      isVisible: true
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

isVisible: true

}

}).mount('#app')

HTML

<div id="app">
  <div v-if="isVisible">v-ifディレクティブを指定した要素</div>
  <div v-else>v-elseディレクティブを指定した要素</div>
  <button v-on:click="isVisible = !isVisible">表示有無切り替え</button>
</div>

<div v-if="isVisible">v-ifディレクティブを指定した要素</div>

<div v-else>v-elseディレクティブを指定した要素</div>

<button v-on:click="isVisible = !isVisible">表示有無切り替え</button>

</div>

上記の例では、dataオプションに定義したisVisibleプロパティの値がtrueの場合にv-ifディレクティブを指定したdiv要素が表示され、falseの場合にv-elseディレクティブを指定したdiv要素が表示されます。

v-ifとv-else-ifとv-elseディレクティブ

v-ifディレクティブ、v-else-ifディレクティブ、v-elseディレクティブを使用した例を以下に示します。

JavaScript

Vue.createApp({
  data: function() {
    return {
      value: 0
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

value: 0

}

}).mount('#app')

HTML

<div id="app">
  <div v-if="value <= 2">～ 2</div>
  <div v-else-if="value >= 3 && value <= 5">3 ～ 5</div>
  <div v-else-if="value >= 6 && value <= 8">6 ～ 8</div>
  <div v-else>9 ～</div>
  <input type="number" v-model.number="value" />
</div>

<div v-else-if="value >= 3 && value <= 5">3 ～ 5</div>

<div v-else-if="value >= 6 && value <= 8">6 ～ 8</div>

</div>

上記の例ではdataオプションに定義したvalueプロパティの値によって、HTML要素の表示状態を切り替えています。
テキストボックスに入力された数値が2以下であれば、v-ifディレクティブを指定したdiv要素が表示され、3～5であれば、次のv-else-ifディレクティブを指定したdiv要素が表示され、6～8であれば、さらに次のv-else-ifディレクティブを指定したdiv要素が表示され、9以上であれば、v-elseディレクティブを指定したdiv要素が表示されます。

Vue.js 入門 Tips 一覧

リンク