Vueの基本的な実装方法4(ディレクティブのv-if, v-for, v-showについて)

はじめに

今回は、前回概要だけ紹介したディレクティブ(v-で始まるVue.js特有の属性)のv-if,v-for,v-showについて解説します。

v-ifの使用方法について

v-ifは、指定された条件が真（true）の場合に要素をレンダリングします。条件が偽（false）の場合、要素はDOMから削除されます。

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <p v-if="isVisible">表示!</p>
  </div>
</template>

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

以下のように表示されます。

• 上記はisVisibleがtrueのなのでレンダリングが行われます。

次に./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <p v-if="isVisible">非表示!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
};
</script>

以下のように何も表示されません。

• 上記はisVisibleがfalseのなのでレンダリングは行いません。

v-forの使用方法について

v-forは、配列やオブジェクトの各要素に対して要素を繰り返しレンダリングします。

./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <!-- 要素をそのまま指定 -->
      <p>{{ item }}</p>
    </li>
    <li v-for="item in items" :key="item.id">
      <!-- idを指定 -->
      <p>{{ item.id }}</p>
    </li>
    <li v-for="item in items" :key="item.id">
      <!-- textを指定 -->
      <p>{{ item.text }}</p>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'アイテム 1' },
        { id: 2, text: 'アイテム 2' },
        { id: 3, text: 'アイテム 3' },
      ],
    };
  },
};
</script>

以下のように表示されます。

• 要素をそのまま指定するとオブジェクトがそのまま表示されます。

• オブジェクトのプロパティ名を指定するとそのプロパティのみ表示されます。

v-showの使用方法について

v-showは、条件に基づいて要素の表示/非表示を切り替えますが、要素は常にDOMに残ります。スタイルのdisplayプロパティを切り替えることでこれを行います。

<template>
  <div>
    <p v-show="isShown">表示!</p>
  </div>
</template>

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

以下のように表示されます。

• 上記はisShownがtrueのなので表示されます。

次に./components/HelloWorld.vueのコードを以下のように修正します。

<template>
  <div>
    <p v-show="isShown">非表示!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShown: false,
    };
  },
};
</script>

以下のように何も表示されません。

• 上記はisShownがfalseのなので表示されません。

v-ifとv-showの違い

v-ifとv-showには以下のような違いがあります。

1. DOMの存在の違い:
   • v-if: 条件が偽（false）の場合、要素はDOMから完全に削除されます。条件が真（true）に変わると、要素は再びDOMに追加されます。
   • v-show: 要素は常にDOMに存在しますが、条件に基づいてその表示が切り替えられます。CSSのdisplayプロパティをnoneに設定して要素を非表示にします。
2. パフォーマンスの違い:
   • v-if: 条件の変更が少ない場合に適しています。初期状態で偽（false）の場合、関連するDOM要素はレンダリングされません。これにより、初期レンダリングのパフォーマンスが向上する可能性があります。
   • v-show: 条件が頻繁に変わる場合に適しています。初期状態で非表示にしても、要素はDOMに残るため、表示状態の切り替えが高速です。
3. 使用場面の違い:
   • v-if: 条件によってコンポーネントや要素が存在するかどうかを制御するのに適しています。例えば、ユーザーの認証状態に基づいて特定のUIを表示する場合などです。
   • v-show: より頻繁な表示切替が必要な場面で有効です。例えば、タブ切り替え、ドロップダウンメニュー、任意のUI要素の表示・非表示などです。

次回

次回は特定のコンポーネントのデータプロパティや計算プロパティの変更を監視するためのVueコンポーネントのオプションの一つであるウォッチャ（Watchers）またはウォッチプロパティ（watch property）について解説します。