【Vue3】v-showとは？使い方を紹介する

v-showとは条件付きでhtml(DOM)を表示するときに使用するディレクティブ(vue独自の属性)です。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

作ったアプリ： KeyScript

使い方

使い方を紹介します。Vue3で動きます。

基本

<script setup>
let isView = true
</script>

<template>
  <p v-show="isView">v-show example</p>
</template>

trueとfalseで表示するかを判定しています。

  • trueで表示
  • falseで非表示

Javascriptで動的に表示と非表示を切り替えていきます。

v-showはCSSのdisplayプロパティを使って表示を切り替えています。

Vueでの書き方。

<p v-show="isView">v-show example</p>

実際のHTML。

<p style="display: none;">v-show example</p>

pタグにインラインでCSSが追加されているのがわかると思います。

v-showで複数要素を扱う

複数の要素を切り替えるには、divなどで囲ってから、v-showを使います。

<template>
  <h1>Page Title</h1>
  <div v-show="isView">
    <p>v-show example</p>
    <p>This Page is v-show example page</p>
  </div>
</template>

v-showの複数条件

  • 複数の条件式がtrueの時
  • どちらかの条件式がtrueの時

などのような条件にも対応できます。Javascriptのif文と同じです。

<script setup>
let isView = true
let isShow = true
</script>

<template>
  <p v-show="isView && isShow">v-show example</p>
</template>

<script setup>
let isView = false
let isShow = true
</script>

<template>
  <p v-show="isView || isShow">v-show example</p>
</template>

v-ifとv-showの違い

似た機能を持つディレクティブにv-showがあります。違いを説明します。

v-ifの場合。

  • DOMを本当に描画したり削除している

v-showの場合。

  • DOMは常に描画していて、CSSで表示と非表示を切り替えている

という違いがあります。

なのでv-ifは切り替え時にDOMの操作を行うので、時間がかかり、v-showは常に表示したくないDOMも描画しているので初期表示に時間がかかる性質があります。