Vueと共通

【Nuxt.js】Nuxt文法編:v-show

前置き

初心者向けの文法編です✨👏
今回はv-show!

どんな時に使うの?

要素の表示/非表示に使います!
あれ、なんか見たことあるような…🤔
そうです!!!
v-ifとほとんど一緒です!
なので主にv-ifとの違いを解説します🙋‍♀️
v-ifの解説記事はこちら


v-show

簡単な使い方

前置きに書いた通り、
v-ifと使い方はほとんど同じです!
式が真の時に表示されます👀

表示

true

h1タグが表示されます

false

h1タグがdisplay: none;
非表示になります

コード

) pages


v-ifとの違い

表示の違い、使い分け方の違い

表示

検証を見れば分かります👀

v-show

h1タグが描写されDOMには残っています。
display: none;で見えなくなっていますね👀

v-if

<! ---->
そもそも描写されません!

使い分け

  • v-show
    ex) サイト内検索用モーダル
    └常に描写をしcssで切り替え
      =頻繁に切り替える場合に⭕️
    └描写は1度きり
      =非表示でもdataを保持する場合に⭕️

  • v-if
    ex) 最初の訪問時に1回だけ出る広告modal
    └条件式がtrueになるまで描写しない
      =ほとんど切り替えない場合に⭕️
    └その都度描写される
      =非表示でも
       dataを保持しなくて良い場合に⭕️

コードの違い

  • v-show
    単体でのみ使用可能
    v-else-if, v-elseとセット❌
  • v-if
    単体でも組み合わせでも使用可能
    v-else-if, v-elseとセット⭕️

NG例:v-showとv-elseをセットで使ってみる

v-elseを使っていますが
対応するv-ifがないですよ
とエラーが出ます👀

) pages

OK例:v-ifとv-elseをセットで使ってみる

きちんとelseの方が表示されますね🌟

) pages

-Vueと共通
-

© 2024 aLiz Nuxt