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

前置き

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

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

v-show

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

index.vue

<template>
 <div class="page">
   // h1タグの表示をokの真偽値で切り替え
   <h1 v-show="ok">Hello!</h1>
 </div>
</template>

<script>
export default {
 data () {
   return {
     ok: true,
   }
 },
}
</script>

【表示】
🌷true🌷
h1タグが表示されます。

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

v-ifとの違い(表示)

検証を見れば分かります👀
・v-show
　ex) サイト内検索用モーダル
　└常に描写をしcssで切り替え
　　　＝頻繁に切り替える場合に⭕️
　└描写は1度きり
　　　＝非表示でもdataを保持する場合に⭕️
・v-if
　ex) 最初の訪問時に1回だけ出る広告modal
　└条件式がtrueになるまで描写しない
　　　＝ほとんど切り替えない場合に⭕️
　└その都度描写される
　　　＝非表示でも
　　　　dataを保持しなくて良い場合に⭕️

【表示】

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

🌷v-if🌷

そもそも描写されません！

v-ifとの違い(コード)

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

【index.vue】
v-showとv-elseを使ってみます。

index.vue

<template>
 <div class="page">
   <h1 v-show="ok">
     Hello!
   </h1>
   <h1 v-else>
     falseの場合に表示させたい
   </h1>
 </div>
</template>

<script>
export default {
 data () {
   return {
     ok :false,
   }
 },
}
</script>

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

【index.vue】
v-ifに変更してみましょう！

index.vue

<template>
 <div class="page">
   <h1 v-if="ok">
     Hello!
   </h1>
   <h1 v-else>
     else
   </h1>
 </div>
</template>

<script>
export default {
 data () {
   return {
     ok :false,
   }
 },
}
</script>

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

次回予告

【Nuxt.js】firebase基礎編(Auth版)：
facebookログインをできるようにしよう
6/12(金)公開です🌟

記事が公開したときにわかる様、
フォローをお願いします😀💕
https://twitter.com/aLizlab