【Vue.js 】配列のデータを展開してループ（v-forディレクティブ）

v-for

for文やwhile文のような繰り返しの処理をVueでも使うことができる（配列を用意して、そこから１つずつ取り出してその内容を表示する）　　
Vue.jsではこの繰り返し文を「v-for」ディレクティブを使用してhtmlファイル上で実現することができる。

基本構文
v-for="各要素の一時的な変数名 in 繰り返したい配列やオブジェクト"

データ配列を展開してみる

sample.html

<div id="app">
  <dl v-for="grade in grades" :key="grade.subject" >
    <dt>{{ grade.subject }}</dt>
    <dd>{{ grade.score }}</dd>
  </dl>
</div>

grades.js

new Vue({
   el: '#app',
   data: {
       grades: [
             { subject:'国語', score: '80点' },
             { subject:'数学', score: '68点' },
             { subject:'理科', score: '75点' },
             { subject:'社会', score: '88点' }
       ]
   }
});

""grade in grades"でdataのgradesプロパティを変数"grade"に置き換える。
{{ grade }}でデータを表示。

sample.html

<div id="app">
  <dl v-for="(grade, index) in grades" :key="grade.subject" >
    <dd>{{ index }}</dd>
    <dd>{{ grade.subject }}</dd>
    <dd>{{ grade.score }}</dd>
  </dl>
</div>

要素の配列にはインデックス番号が割り振られているのでインデックスを取得することもできる。
(grade, index)
コンマで区切り、2番目の引数にインデックス用の変数を入れて括弧で囲むだけ。
{{ index }}で表示することができる。
※インデックス番号は0から始まることに注意。

keyプロパティの設定

上記のサンプルコードでは:key=""でkeyの設定がされている。ここではデータの値を入れているがインデックスを指定してもOK。
v-forディレクティブではユニークなkeyプロパティをつけなければならない。keyはVue.jsがデータを追跡する際のヒントになり、パフォーマンスにも影響する。