Vue.jsではv-if、v-showを用いて特定の表示 / 非表示を切り替えられますが、templateタグを使用することでも切り替えを行うことができます。templateタグを使用した方法を解説します。

画面表示の概要

サンプルとして、通常画面と管理者画面で参照できる範囲が異なるユーザー情報画面を作成します。便宜上、ページ下部のボタンで切り替え可能とします。

templateタグ

templateタグを使用する場合は表示 / 非表示を切り替えたい範囲をtemplateタグで囲み、v-ifで変数とバインドします。変数がtrueの場合は表示、falseの場合は非表示となります。

<template v-if="xxx">
  xxx
</template>

サンプルコード実行

各々でプロジェクトを作成すれば問題ありませんが、もし方法がわからないのであれば以下の記事を参考にして作成してください。

以下のソースコードをvueファイルに張り付け、"npm run dev"でサーバーを起動しブラウザでURLにアクセスします。

上記の記事を参照してプロジェクトを作成した場合は、App.vueへソースコードを貼り付け（本来の用途とは違います）起動すればhttp://localhost:5173へアクセスできるはずです。

ソースコード

<script setup>
import { ref } from 'vue'
const isAdmin = ref(false)
const setAdmin = () => {
  isAdmin.value = true
}
const setNormal = () => {
  isAdmin.value = false
}
</script>

<template>
  <div style="width: 60%">
    <h1>サンプル</h1>
    <div style="margin-left: 20px">
      <h2>ユーザー情報</h2>
      <table>
        <tr>
          <th>名前</th>
          <th>年齢</th>
          <th>職業</th>
        </tr>
        <tr>
          <td>山田 太郎</td>
          <td>30</td>
          <td>エンジニア</td>
        </tr>
        <tr>
          <td>鈴木 花子</td>
          <td>28</td>
          <td>デザイナー</td>
        </tr>
        <tr>
          <td>佐藤 一郎</td>
          <td>35</td>
          <td>マーケター</td>
        </tr>
        <template v-if="isAdmin">
          <tr>
            <td>世界 花子</td>
            <td>56</td>
            <td>世界的なデザイナー</td>
          </tr>
          <tr>
            <td>世界 一郎</td>
            <td>48</td>
            <td>世界的なマーケター</td>
          </tr>
        </template>
      </table>
      <button @click="setNormal">通常画面</button>
      <br>
      <button @click="setAdmin">管理者画面</button>
    </div>
  </div>
</template>
<style>
h1 {
  color: #364e96;
  /*文字色*/
  padding: 0.1em 0;
  /*上下の余白*/
  border-top: solid 3px #364e96;
  /*上線*/
  border-bottom: solid 3px #364e96;
  /*下線*/
}

h2 {
  font-weight: bold;
  border-left: 5px solid #4c9ac0;
  border-bottom: 2px dashed #B4B4B4;
  padding: 0.25em 0 0.3em 0.5em;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,
table td {
  padding: 10px 0;
  text-align: left;
}

table tr:nth-child(odd) {
  background-color: #eee
}

button {
  display: inline-block;
  margin-bottom: 6px;
}
</style>

サンプル解説

script

JavaScriptでは表示の制御を行うisAdminと、isAdminに真偽値を設定するsetAdmin()、setNormalを定義します。初期値はfalseを定義しています。

<script setup>
import { ref } from 'vue'
const isAdmin = ref(false)
const setAdmin = () => {
  isAdmin.value = true
}
const setNormal = () => {
  isAdmin.value = false
}
</script>

tableタグ

上記の画面ではtableタグの「世界 〇〇」の部分の表示を切り替えるため、それらの定義をtemplateタグで囲みv-ifでisAdminとバインドします。

<template v-if="isAdmin">
  <tr>
    <td>世界 花子</td>
    <td>56</td>
    <td>世界的なデザイナー</td>
  </tr>
  <tr>
    <td>世界 一郎</td>
    <td>48</td>
    <td>世界的なマーケター</td>
  </tr>
</template>

ボタン

各ボタンにScriptで定義した真偽値を設定する関数をクリックイベントに設定します。

<button @click="setNormal">通常画面</button>
<button @click="setAdmin">管理者画面</button>

余談

在宅ワークのため2～4000円のメンブレンキーボードを使用していましたが、１年も持たずキーがダメになっていたためパンタグラフ方式でお手頃な値段のものを探しました。
有名メーカー＆ワイヤレス＆パンタグラフ方式＆USBレシーバーの条件で絞込み購入したキーボードが以下になります。とても快適です。