# 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プロパティをblockとnoneに切り替えているだけ。レンダリングは最初の一回のみで、描写された DOM は破棄することがない。

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

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

# 参考

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

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

vuejs i18n の html-lang と font 設定

vue-i18n 多言語対応の際にhtml lang meta 変更と選択言語によってHPフォント...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

vuejs で omisejapan の決済フォーム作成した時のメモ

omisejapanカードペイメントvuejsでフォーム開発する時のメモ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

vuejs-datepicker 使ってカレンダー表示日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...