v-forで複数の要素をループする

Vue.jsで単一要素のループではなく、複数要素のブロックをループさせたいということがたまにあるので、その際のループ方法をメモしておきます。

サンプルコード

例として、以下のようなタグ構造でdtとddのセットをループさせたいとします。

<dl>
  <dt>天ヶ瀬むゆ</dt>
  <dd>夢を食べる半人半妖。寝ている人の悪い夢を、良い夢に変えることができる。普段は周囲にバレないよう気をつけているが、自身も様々な夢を見たいと配信活動を始める。しかし未だ本人の寝つきは悪い。</dd>
  <dt>先斗寧</dt>
  <dd>関西出身の、異界と現代を繋ぐ雑貨屋でアルバイトする学生。雑貨屋に住み着く妖精が見えるようになったのだが、ブルーベリーの食べすぎのせいかもしれない。</dd>
  <dt>海妹四葉</dt>
  <dd>「チャレンジしてから考える」タイプの、七転び八起き貧乏学生。新しく楽しい挑戦を求めた結果、配信活動を始めることにした。頼られようと本人は振舞っているつもりが、なぜかいつも心配されてしまう。</dd>
</dl>

ループ用にdtとddを囲うタグを追加する形でもループさせることはできますが、タグ構造を変更させたくない場合はtemplateタグを使用します。

<div id="app">
  <dl>
    <template v-for="member in members">
      <dt>{{ member.name }}</dt>
      <dd>{{ member.profile }}</dd>
    </template>
  </dl>
</div>

var app = new Vue({
  el: '#app',
  data: {
    members: [
      {
        name: '天ヶ瀬むゆ',
        profile: '夢を食べる半人半妖。寝ている人の悪い夢を、良い夢に変えることができる。普段は周囲にバレないよう気をつけているが、自身も様々な夢を見たいと配信活動を始める。しかし未だ本人の寝つきは悪い。'
      }, {
        name: '先斗寧',
        profile: '関西出身の、異界と現代を繋ぐ雑貨屋でアルバイトする学生。雑貨屋に住み着く妖精が見えるようになったのだが、ブルーベリーの食べすぎのせいかもしれない。'
      }, {
        name: '海妹四葉',
        profile: '「チャレンジしてから考える」タイプの、七転び八起き貧乏学生。新しく楽しい挑戦を求めた結果、配信活動を始めることにした。頼られようと本人は振舞っているつもりが、なぜかいつも心配されてしまう。'
      }
    ]
  }
});

templateタグはレンダリング時には描画されないため、意図したタグ構造で表示することができました。
v-forのデモページ