条件分岐 v-if – Vue.js入門

この記事ではVue.jsの条件分岐 v-if について学習します。
v-ifは、何らかの条件によって。要素を表示/非表示切り替える時に利用します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

v-if 例題

ルートテンプレートに、p要素を配置して、表示、非表示を切り替えることをやってみましょう。

実装

それでは、実際にコードを書いていきましょう。
空のルートテンプレートをマウントとした
状態からはじめます。

表示、非表示を切り替えるために使う、プロパティーを用意します。
JavaScript

var app = new Vue({
  el: '#app',
  data: {
    toggle: false
  }
})

次に、p要素を配置します。
HTML

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

p要素にv-ifディレクティを設定します。
値には、プロパティtoggleを指定します。

<div id="app">
  <p v-if="toggle">
  Hello
  </p>
</div>

動作確認

プロパティがtoggleがtrueの時は、Helloと表示されています。
toggleをfalseに変えてみましょう。
Helloの文字が消えて
何も表示されなくなりました。

toggle: true
に戻します。

ここで、DOMツリーががどうなっているか観てみましょう。

Helloを選択して、右クリック、検証をクリックします。

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

このように、p要素が描画されています。

こここで、 toggle: falseにします。

右クリック > 検証 として、 確認すると

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

というように、p要素がDOMから削除されています。

v-if 利用時の注意点

v-ifディレクティブでは、条件を満たさなかった場合、要素はDOMレベルで削除される点に、注意してください。

要素を頻繁に表示/非表示を繰り返す用途の場合、描画コストが高くなる恐れがあります。
対策としては、cssのdipsplayプロパティーを利用する、v-showディレクティブを利用します。

v-showについては、次回以降の記事で学習していきます。

サンプルコード

動画でVue.jsのv-ifディレクティブを学習する

おわりに

この記事では、Vue.jsの条件分岐 v-ifについて学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する