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

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

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


Vue.jsでの分岐やループ処理

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タグを使う

タイトルにもある通りですが、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>

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


Fire TV Stick

Fire TV Stick

  • 発売日: 2017/04/06
  • メディア: エレクトロニクス
Fire TV Stick 4K - Alexa対応音声認識リモコン付属

Fire TV Stick 4K - Alexa対応音声認識リモコン付属

  • 発売日: 2018/12/12
  • メディア: エレクトロニクス
Fire HD 10 タブレット (10インチHDディスプレイ) 64GB - Alexa搭載

Fire HD 10 タブレット (10インチHDディスプレイ) 64GB - Alexa搭載

  • 発売日: 2017/10/11
  • メディア: エレクトロニクス