目次8

2026-05-16 追記: 初出は Vue 2 / Options API 時代の記事です。2026 現在は Vue 3 と Composition API（<script setup>）が標準ですが、v-if / v-else / v-for といったテンプレート構文の書き方は変わっていないので、骨子はそのまま参考になります。

Vue.js を初めて使う方に向けて、今回は条件分岐と繰り返し描画にあたるディレクティブを整理します。

mustache タグと v-bind は以下の記事で解説しています。

Vue.js 入門 - mustache タグと v-bind

結論

  • v-if: 条件が真のときだけ要素を描画する。v-else / v-else-if も使える
  • v-show: 表示・非表示を CSS の display で切り替える。頻繁に出し入れする要素向き
  • v-for: 配列を繰り返し描画する。:key を忘れずに指定する

v-if

v-if は条件式が真のときだけ要素を描画するディレクティブです。

実務でもよく使います。スマートフォンと PC で出し分けたい要素、ログイン状態で切り替えたい UI などが典型例です。

v-if の基本的な使い方

v-if は対象要素の属性として書き、値に評価式を渡します。


以下のコードは HTML 内で判定し、表示非表示を処理しています。

実際に実行すると サンプルです。 と表示されます。

<template>
  <div v-if="sampleNum === 1">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      sampleNum: 1
    };
  },
};
</script>

v-else

v-if は通常の if 文と同じように else も書けます。

v-else を後続要素の属性に書くだけです。


実際に実行すると else が表示です。 と表示されます。

<template>
  <div>
    <div v-if="sampleNum === 0">
      サンプルです。
    </div>
    <div v-else>
      elseが表示です。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sampleNum: 1
    };
  },
};
</script>

注意点として、v-else は v-if の直後の要素に置く必要があります。間に別の要素が挟まると認識されません。

v-else-if

else の他に else-if も使えます。

書き方は同じで、属性に v-else-if を記述します。


実際に実行すると sampleNum は 1 です。 と表示されます。

<template>
  <div>
    <div v-if="sampleNum === 0">
      サンプルです。
    </div>
    <div v-else-if="sampleNum === 1">
      sampleNumは1です。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sampleNum: 1
    };
  },
};
</script>

v-show

v-show は v-if と似た見た目の出し分けを行いますが、内部の仕組みが違います。

書き方は v-if と同じく属性に v-show="..." と書きます。


v-if と v-show の違いは DOM ごと出し入れするか、CSS の display で隠すだけか です。

v-if は条件が真になったタイミングで要素を生成し、偽になれば DOM ごと取り除きます。v-show は最初から DOM を作っておき、display: none の付け外しだけで切り替えます。そのため切り替えコストは v-show のほうが軽く、初回描画コストは v-if のほうが軽くなります。

使い分けの目安は次のとおりです。

  • 初期表示のときに条件が偽になりやすく、めったに出さない要素 → v-if
  • 表示・非表示を頻繁に切り替えるトグル UI → v-show

なお、v-show は display プロパティに依存する都合上、<template> 要素や v-else との組み合わせには使えません。その場合は v-if 側で書きます。

v-for

v-for は配列やオブジェクトを繰り返し描画するためのディレクティブです。

JavaScript の for 文に近い感覚で、配列の要素分だけ同じテンプレートを並べてくれます。

書き方は属性に v-for="(item, index) in list" のように記述します。あわせて :key に一意な値を渡しておくと、Vue が差分検知を正しく行えます。


実際に実行すると 中身は 1, index は 0。中身は 2, index は 1。 と表示されます。

<template>
  <div>
    <div v-for="(num, i) in numList" :key="i">
      中身は{{ num }}, indexは{{ i }}。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numList: [1, 2]
    };
  },
};
</script>

まとめ

v-if は条件で要素を生み出すか消すか、v-show は要素を残したまま CSS で隠すか。v-for は配列を繰り返すときに :key を添える。テンプレート構文は Vue 3 でも変わっていないので、ここを押さえておけば Composition API に移っても同じ書き方で済みます。

関連記事: