v-show

2024 5/11

2023.08.07 2024.05.11

記事の内容

v-show

v-showは、真偽値にて表示や非表示を切り替えるディレクティブになります。
※templateタグには使用できない

記法

[ HTML ] =============================
　<要素名 v-show=”真偽値”>
　　表示内容
　</要素名>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-showについて</title>
  </head>
  <body>
    <div id="app">
      <button @click="show = !show">表示/非表示</button>
      <p v-show="show">v-showに関して</p>
    </div>

    <script src="./js/show.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      show: true,
    };
  },
}).mount("#app");

出力結果

v-showに関して

v-ifとv-showの違い

v-ifとv-showの違いは、動作後のタグの動きに違いがあります。

v-if 　タグごと非表示
v-show　【display:none;】で非表示 ( 頻繁に切り替えがある場合に使用する )

v-if

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-ifについて</title>
  </head>
  <body>
    <div id="app">
      <button @click="show = !show">表示/非表示</button>
      <p v-if="show">v-ifに関して</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/if.js"></script>
  </body>
</html>

v-show

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-showについて</title>
  </head>
  <body>
    <div id="app">
      <button @click="show = !show">表示/非表示</button>
      <p v-show="show">v-showに関して</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/if.js"></script>
  </body>
</html>

v-for
v-once