v-for ~配列・オブジェクトに基づいたリストレンダリング~

配列

v-for="要素 in 配列" :key="要素"

<li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
// 第二引数として配列のインデックスをとることも可

data: {
 fruits: ['apple', 'mango', 'banana'] 
}

• apple
• mango
• banana

オブジェクト

v-for="value in オブジェクト"

<li v-for="value in object" :key="value">{{ value }}</li>
// 第二引数としてオブジェクトのキー名をとることも可
// 第三引数としてインデックスをとることも可

data: {
 object: {
    name: 'taro',
    age: 21
 } 
}

• taro
• 21

数

v-for="引数 in 任意の数"

<li v-for="n in 3" :key="n">{{ value }}</li>

• 1
• 2
• 3

key属性があったほうが良い理由

key属性によって、レンダリングしたそれぞれに一意なキーを与えることができる。配列の要素を削除したときなど、間違った要素が再利用されるのを防げる（※ただしtemplateタグ内では使えない）