Vue.js を初めて使う方に向けて、今回は Vue.js で追加された独自の HTML 記法について解説します。

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

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

結論

  • v-if: 要素を条件によって表示・非表示できる。else / else-if も使用可能
  • v-show: 似た機能だが Safari / IE 非対応のため v-if 推奨
  • v-for: 要素を繰り返し表示できる。:key の指定を忘れずに

v-if

v-if は要素を条件によって表示、非表示させることができます。

実際に業務でも v-if はよく使います。例えばスマホと PC で出す要素を変えたりなどで使用します。

v-if の基本的な使い方

v-if の使用方法は、属性に v-if と書き、論理演算を記述すれば OK です。


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

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

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

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

v-else

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

else 文の使用方法は、属性に v-else を記述すれば OK です。


実際に実行すると 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-if の後に記述しないと NG です。

v-else-if

else 文の他に else-if も使用できます。

else-if 文の使用方法は、属性に v-else-if を記述すれば OK です。


実際に実行すると 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-if と同じような処理として v-show があります。

v-show も要素を条件によって表示、非表示させることができます。

記述方法も v-if と同様に v-show="" と記述します。


v-if と v-show の違いは DOM が再読み込みされるかどうかです。

v-if は true になる度に DOM が読み込まれます。v-show は一度 DOM が読み込まれて、false になっても DOM は読み込まれたままになります。

しかし v-show の使用はオススメできません。

Safari と IE は v-show を使用できないので、基本的には v-if をオススメします。

v-for

v-for は要素の繰り返し表示ができます。

通常の for 文と考えてもらって OK です。

v-for 文の使用方法は、属性に v-for を記述すれば OK です。


実際に実行すると 中身は 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>

まとめ

今回は Vue.js の v-if と v-for を紹介しました。

他の記事では Vue.js の component についても解説しています。

Vue.js の基礎中の基礎なので、しっかりマスターしましょう。

関連記事: