テンプレートでデータの数だけ繰り返し表示したい場合はv-for属性を使います。この属性は配列とオブジェクトどちらでも回すことができます。この属性はループをラップする要素ではなく、ループする（繰り返し出現するタグ）に付けなければいけません。
また値を回す時、そのルートタグにはv-bind:key（:key）値の設定が必要です。
配列
値だけを回す、値とインデックスを回すの2つの方法があります。
配列の要素だけを回したい時はitem in arrayと置きます。inの右側に配列値を置き、左側に各値が入る変数名を置きます。
<ul>
<li v-for="item in arr" :key="item">{{item}}</li>
</ul>
インデックスも一緒に回したい場合は左側を括弧で囲み第2引数のような形でインデックス値を受け取れます。
<ul>
<li v-for="(item, index) in arr" :key="item">{{item}}</li>
</ul>
オブジェクト
こちらは
値だけ
値とキー
値とキーとインデックス
の3つの方法がありますが、大体は配列と同じです。1つの場合は直に、複数の場合は括弧で囲んで値を受け取ります。
値だけ
<ul>
<li v-for="value in obj" :key="value">{{value}}</li>
</ul>
値とキーとインデックス
<ul>
<li v-for="(value, key, index) in obj" :key="key">{{key}} {{value}} {{index}}</li>
</ul>
