# vuejs v-if と v-show の違い

比較 v-if v-show
true レンダリング 初期レンダリング後 CSS 操作
false DOM 破棄 初期レンダリング後 CSS 操作
切り替えコスト 高い 低い
初期描画コスト 低い 高い
実現方法 DOM レンダリング操作 CSS 操作

表示非表示する際によく使われる v-if と v-show
v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

# v-if

フロント側ではよくレンダリングという言葉つかうけど、v-if は条件分岐レンダリング
trueになった場合、レンダリング始める。falseの場合イベントリスナと子コンポーネント内部の条件ブロックが破棄される。
初期からfalseの場合、レンダリングされない。

<h1 v-if="show == 1">Vuejs v-if is amazing!</h1>

<h1 v-else-if="show == 2">Vuejs v-show is amazing!</h1>

<h1 v-else-if="show == 3">Vuejs v-if v-show is amazing!</h1>

<h1 v-else>Vuejs is amazing!</h1>

v-if は lazy 遅延描画 初期表示 false の場合、何もしない。条件付きブロックは、 true になるまで描画されない。

# v-show

表示非表示を切り替えるための条件分岐オプション
v-if と使い方ほとんど一緒だが、v-show は CSS のdisplayプロパティをblocknoneに切り替えているだけ。レンダリングは最初の一回のみで、描写された DOM は破棄することがない。

v-show<template> 要素をサポートせず、v-else とも連動しない

v-show は初期条件に関わらず常に描画され、CSS display の切り替えとして扱う

# 参考

Vue.js 条件付きレンダリング (opens new window)

2021-01-01
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
nuxt cordova web ハイブリッドアプリ作成した時のメモ
javascript reduce 連想配列の合計計算覚えよう
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs 開発時に遭遇したエラーリスト
vuejs で omisejapan の決済フォーム作成した時のメモ
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel に vuejs 使うための初期設定