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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <title>Hello dice-record!!</title> </head> <body> <div id="application"> <p> <!-- 必ず表示 --> <a v-bind:href="url" target="_blank">ダイス記</a> </p> <p v-if="show"> <!-- showの値がtrue時のみ表示 --> <a v-bind:href="url" target="_blank">ダイス記 ※v-if</a> </p> <p v-show="show"> <!-- showの値がtrue時のみ表示 --> <a v-bind:href="url" target="_blank">ダイス記 ※v-show</a> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="test.js"></script> </body> </html> |
test.js
1 2 3 4 5 6 7 8 |
var app = new Vue({ el: '#application', data: { url: 'https://dice-record.com/', // falseにすると2つ目のリンクが非表示 show: false } }) |
DOMの状態

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