【Vue.js】「v-if」、「v-show」ディレクティブについて

v-if

条件によって出力させるかさせないかの切り替えができます。

構文

1文のみ

まとまった範囲の条件式

下記のように記述すれば複数行の内容の条件文を記述することができます。

複数行だけでなく、例えば、ul>liとかのように同じDOM階層に複数要素が含まれている場合にまとめてv-ifを指定する場合の記述にも使えたりします。

内部的な動作

Vue.jsの仮想DOMの要素の生成と削除が交互に行われるような動作になります。(イメージ的にはCSSとかではなくjQueryやJavaScriptでDOM生成しているような挙動と同じです。）

v-show

v-ifと違い必ず出力されてCSSプロパティの「display:none;」の状態になります。ただ、v-ifと違ってv-elseだったりtemplateによる複数行の条件分岐の構文は用意されていません。

なお、v-ifのtemplateはv-showでは使えないので注意です！

構文

v-ifとv-showの使い分け

v-ifを使う場合

初期表示のみしか表示、非表示の判定が行われない場合なら余計なDOMを表示しなくても済むのでこちらを使います。例えば、表示されたページの中でユーザーが何かしらの操作を行ってもデータ状態が変わらない場合が該当します。

また、頻繁に切り替えが発生しない状況じゃなくどちらでも良いという場合でも、v-showはtemplete構文が使えなく少し記述が冗長になってしまう可能性があるのでv-ifの方を優先的に使ったほうが良いでしょう。

v-showを使う場合

タブ切り替え等のDOMの更新が頻繁に発生する場合はこちらを使います。なぜならDOMの更新（ノードの追加や削除）はブラウザにとって負担の大きいタスクになるためです。

また、非表示時のデータを保持したい場合でもv-ifではなくv-showを使った方が良いです。（というか使わざるおえないです。）

昔のブラウザ(IEや古いバージョンのSafari)などはdisplayプロパティが一部ちゃんと動作しなかったので、切り替えを行う場合はv-showを使うしかなかったようですが、現在はIEはサポート切れですし問題ないでしょう。