Vue v-show使用法

前回のv-ifに似たv-showの解説をしていきます。

こちらも使い方は同じで付けたり消したりしたいタグの中に書き込みます。
下記のようにv-ifと使い方も同じです。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <p v-show="ok">OK!</p>
</template>

ではこれはv-ifとどう違うのか？
要素の消し方に違いがあり、検証ツールで確認します。
v-ifはボタンが押されて消えた時にはコメントアウトは出ますが、<p>の要素は完全に削除され、存在しなくなります。

一方で、v-showの場合はボタンを押して<p>タグが消えてもタグは存在し続けて、CSSのdisply:none;が当たって表面上画面から消えていることになります。

ではv-ifとv-showどちらを使った方がいいのか？
これは値に指定されている条件のtrueやfalseが高頻度で切り替わる場合はv-showの方が要素をいちいち削除したり付け加えたりしないので処理が早くなります。なのでv-showを使った方がいいです。

一方、高頻度で切り替わらない場合はv-ifの方がいいです。
例えば初期値がfalseで切り替えが少ない場合、最初のレンダリング時にタグを表示しなくていいので必要になった時に初めて表示するようになるわけです。これは効率がいい使い方になります。
これをv-showで設定してしまうと逆に効率が悪くなってしまいます。

この使い分けができた方はいいかなと思います。
で、前回の<template>タグにv-showでは正しく動かないのでこれも注意です。
もし複数の要素を指定したい場合は必ず<div>タグなどを使う必要があります。
そしてv-else-ifみたいなのも無いので同じようなことがしたければ下記のように真偽値に反転したものをもう一つ作る必要があるのでこれも注意です。

<template>
  <button @click="ok = !ok">toggle</button>
  <p v-show="ok">OK!</p>
  <p v-show="!ok">NO!</p>
</template>

今回は短くなりましたが、次回からはv-forディレクティブについて解説していきます。