【Vue.js】v-ifの条件分岐とtemplateによるグループ化

▶

編集

v-ifディレクティブを使用することで条件分岐処理を実行することが出来る。

ifの実装例

html

<div id="app">
    <p v-if="true_data">This is True</p>
    <p v-if="false_data">This is False</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    true_data: true,
    false_data: false,
  }
})

This is True

true_data が true の要素だけが描画され、false_data の方は DOM ごと生成されない。表示・非表示を CSS で切り替えるのではなく、条件が false の要素はそもそも作られないのが v-if の挙動である。

html

<div id="app">
  <div v-if="false_data">
    if
  </div>
  <div v-else-if="true_data">
    else if
  </div>
  <div v-else>
    else
  </div>
</div>

else if

v-else-if と v-else は、直前の要素が v-if / v-else-if であることが条件になる。間に別の要素を挟むと認識されない。また v-else には値を書かない。

ifを付けた要素の子要素が複数ある場合は正しく評価されない。

以下、正しく評価されない実装例

<div v-if="true_data">
    <p>aaa</p>
    <p>bbb</p>
</div>

この書き方だと、条件分岐のためだけに <div> が実際の DOM に残ってしまう。レイアウト用の意味を持たない要素が増えると、CSS のセレクタや Flexbox / Grid の親子関係が崩れる原因になる。

正しく評価するにはtemplateタグを使用する必要がある。

<template v-if="true_data">
    <p>aaa</p>
    <p>bbb</p>
</template>

<template> は描画されない入れ物なので、条件を満たしたときに中身の <p> だけが出力される。複数要素をまとめて出し分けたいときは、常にこちらを使えばよい。

編集

子ページ

子ページはありません

同階層のページ

2026-09-06 23:28:25 guest 437