📖

[Vue.jsのv-ifとv-showの違い]

2022/10/25に公開約1,100字

v-if

  • v-if="条件"と書くことで条件の真偽によりその要素を表示するかしないかをコントロールできる
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>
  • v-ifはディレクティブですので、複数の要素の表示/非表示をまとめてコントロールする際は以下のようにv-ifを<template>タグに記述する。
  • 条件が真のときに<template>要素全体が表示され、偽のときには<template>要素全体が非表示になる。
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

  • v-ifと同様にしてv-show="条件"と書くことで条件の真偽によりその要素を表示するかしないかをコントロールできる。
  • v-ifとの違いは、要素が常にDOMに保持されるということ。
  • つまり、v-showは要素の表示と非表示の切り替えをCSSの書き換えによって実現する。
<h1 v-show="awesome">Vue is awesome!</h1>
<h1 v-show="not awesome">Oh no!</h1>

以上の要素がブラウザ上で描画されるときには

<h1>Hello!</h1>
<h1 style="display: none;">Oh no!</h1>

となり、結果的にはHello!だけが表示されます。

どちらを使うべきか

  • v-ifは初期表示のコストが低い代わりに、SPA上で表示切り替えを行うためのコストが高い。
  • v-showは初期表示のコストが高い代わりに、表示切り替えをCSSで行うため、表示の切り替えに要するコストが低い。
    つまり、

切り替えの頻度が低ければv-if
切り替えの頻度が高ければv-show

という使い分けをすれば良さそうです。

一部のブラウザではv-showは使えない

SafariとIEは、仕様でdisplay:noneのようなdisplayプロパティを適用できません。
従ってv-showでは要素の表示と非表示がコントロールできないので、v-ifを代わりに使用する必要があります。

参考

https://qiita.com/aqua_ix/items/61eac355f3c24d7676e1

Discussion

ログインするとコメントできます