Vue.jsのv-ifやv-forで無駄にタグを増やしたくない時はtemplateで代用するのが便利

Vue.jsでは分岐やループ処理で、動的にタグを描画したい場面がありますよね。
例えばリストを動的に増やしたい時は、liタグにv-forを付与したり、ある文言が特定の条件を満たした時のみ表示させる場合はpタグにv-ifを付けたりなど…。

例）

<ul>
  <li v-for="test in testList"></li>
</ul>

<p v-if="showMessage === true"></p>

それほど複雑でなければ困らないのですが、条件が複雑になったり、ループの階層が増える場合、v-forやv-if用に無駄にタグを増やしてしまうことはありませんか？

そんな時、無駄に階層を増やさなくてもできる方法があるのです。

タイトルにもある通りですが、templateタグを使えば万事解決です。

例えば以下のような使い方をした場合、実際に表示されるタグを見てみましょう。
（下記のような場合はspanタグにv-ifを入れてしまえばいいと思いますが、例としてtemplateタグを使っています。）

入力内容

<template v-if="showMessage === true">
  <span>メッセージ</span>
</template>

実際の表示

<span>メッセージ</span>

わかりますか？
templateタグは表示されませんよね。
MVCモデルで、サーバサイドからレンダリングした値をビューに表示させる時のような使い方ができるのです。

よって以下のように複数の階層のループ処理があっても、無駄にタグを増やす必要がないのです。

入力内容

<ul>
  <template v-for="test in testList">
    <li v-for="sub in test.subList">
      <span>{{ sub.message }}</span>
    </li>
  </template>
</ul>

実際の表示

<ul>
  <li>
    <span>メッセージが表示されます</span>
  </li>
</ul>

とても便利ですよね。
無駄にタグを増やさないようにぜひ使ってみてください。

親バカエンジニアのナレッジ帳