2021-04-15

Vue.js入門！エンジニアが解説するv-if、v-for

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

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

Vue.js入門！エンジニアが解説するv-bind基礎

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はtureになる度に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>