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

2020.07.12

前置き

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

どんな時に使うの？

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

v-show

簡単な使い方

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

表示

true

h1タグが表示されます

false

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

コード

) pages

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

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

// h1タグの表示をokの真偽値で切り替え

<h1 v-show="ok">Hello!</h1>

</div>

</template>

export default {

data () {

return {

ok: true,

}

</script>

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

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

Hello!

</h1>

falseの場合に表示させたい

</h1>

</div>

</template>

export default {

data () {

return {

ok :false,

}

</script>

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

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

) pages

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

Hello!

</h1>

else

</h1>

</div>

</template>

export default {

data () {

return {

ok :false,

}

</script>