Hapicode

# 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)

2021-01-01
  • vuejs

関連記事

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

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

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

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定

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

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