Vueでよく使うディレクティブまとめ：v-if, v-for, v-bind などの使い方

v-if / v-else-if / v-else：条件によって要素を切り替える

v-if は、条件に応じてDOM要素を描画・非描画するディレクティブです。

<template>
  <div>
    <p v-if="isLoggedIn">ログイン済み</p>
    <p v-else>ゲストユーザー</p>
  </div>
</template>

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

ポイント

• v-else-if や v-else と組み合わせることで、条件分岐が可能。
• 非表示になるのではなく、DOM自体が生成されないため、パフォーマンス上も有利。

v-show：表示・非表示を切り替える（CSSベース）

v-show も要素の表示・非表示を制御できますが、こちらは CSS の display: none を切り替えるだけです。

<p v-show="isVisible">表示されるかも</p>

違い

• v-if：初回はDOMを生成しない。切り替えコストは高い。
• v-show：初回からDOMを生成。切り替えは高速。

v-for：リストのループ出力

リストレンダリングは v-for を使って簡単に実現できます。

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}. {{ item }}
  </li>
</ul>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry'],
    };
  },
};
</script>

ポイント

• :key は省略せず必ず指定する（仮想DOMの差分更新で重要）。
• 配列やオブジェクトもループ可能。

v-bind：属性へのデータバインディング

v-bind はHTML属性にデータをバインドするために使います。

<img v-bind:src="imageUrl" v-bind:alt="imageAlt">
<!-- 省略記法 -->
<img :src="imageUrl" :alt="imageAlt">

data() {
  return {
    imageUrl: 'https://example.com/logo.png',
    imageAlt: 'ロゴ画像',
  };
}

使用例：クラスやスタイルの動的バインド

<div :class="{ active: isActive }">クラスの切り替え</div>
<div :style="{ color: textColor }">スタイルの切り替え</div>

v-model：フォームとの双方向バインディング

ユーザー入力とデータを同期させる場合は v-model が便利です。

<input v-model="username" placeholder="ユーザー名を入力">
<p>こんにちは、{{ username }} さん！</p>

v-on：イベントリスナーを追加する

v-on はクリックなどのイベントをハンドリングします。

<button v-on:click="increment">カウントアップ</button>
<!-- 省略記法 -->
<button @click="increment">カウントアップ</button>

<p>カウント：{{ count }}</p>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

その他の便利ディレクティブ

まとめ：Vueディレクティブを使いこなして効率的な開発を

Vueのディレクティブは、テンプレート内の振る舞いを簡潔に定義できる非常に強力な機能です。
特に v-if、v-for、v-bind、v-model、v-on などは、日常的に使う基本ディレクティブとして必須です。まずはこれらをマスターすることで、より読みやすく、保守しやすいVueアプリケーションを構築できるようになります。