Vue.js

【Vue.js】v-ifとv-showの違い【DOM上の有無】

Vue.jsのv-ifディレクティブとv-showディレクティブの共通点と差異について説明します。

v-ifとv-showの共通点

表示・非表示の切り替え

v-ifとv-showの共通点としては、表示・非表示の切り替えを行う点。

true時にはブロックを表示し、false時にブロックを表示しない。

v-ifとv-showの違い

DOMレベルで消えるか否か

v-ifとv-showの違いは、DOMレベルで消えるか否か。

  • v-ifの場合、false時にdom上からも消える。
  • v-showの場合、false時にdom上から消えない。

もし頻繁に表示と非表示の切り替えを行うようなら、描画コストが重たくなるリスクが高くなる為、v-show推奨

test.html

 

test.js

 

DOMの状態

上記を確認すると、繰り返しになるが下記のことが解る。

  • v-ifはfalse時、DOM上から消える(ダイス記 ※v-ifがごっそり消えているのが判る)。
  • v-showはfalse時、DOM上に残っている。style=”display: none;”で修飾することで、画面上表示しなくしている。

公式

v-if-vs-v-show

以上です。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です