Vue.jsのv-forを使ってみる

Vue.jsのv-forで配列やオブジェクトをレンダリングする方法をいくつか試してみます。

サンプルコード

まずは配列を表示してみます。

var app = new Vue({
  el: '#app',
  data: {
    members: ['天宮こころ', 'エリー・コニファー', 'ラトナ・プティ']
  }
});

v-forは変数名 in 配列名 の形式で指定します。

<ul id="app">
  <li v-for="member in members">
    {{ member }}
  </li>
</ul>

v-forのデモページ

配列のインデックスを使用したい場合、(変数名, index) in 配列名 の形式で指定します。

<ul id="app">
  <li v-for="(member, index) in members">
    {{ index }} . {{ member }}
  </li>
</ul>

v-forのデモページ2

データがオブジェクトの場合でも使用できます。

var app = new Vue({
  el: '#app',
  data: {
    profile: {
      name: '天宮こころ',
      birthday: '7月1日',
      height: '150cm'
    }
  }
});

オブジェクトの場合、value in オブジェクト名 の形式になります。

<ul id="app">
  <li v-for="value in profile">
    {{ value }}
  </li>
</ul>

v-forのデモページ3

先ほどの例ではオブジェクトのvalueを出力しましたが、keyも一緒に出力することもできます。
(value, key) in オブジェクト名 の形式で指定します。

<ul id="app">
  <li v-for="(value, key) in profile">
    {{ key }} : {{ value }}
  </li>
</ul>

v-forのデモページ4

配列の時と同じく、インデックスを使用することもできます。
(value, key, index) in オブジェクト名の形式で指定します。

<ul id="app">
  <li v-for="(value, key, index) in profile">
    {{ index }} . {{ key }} : {{ value }}
  </li>
</ul>

v-forのデモページ5
注意点として、オブジェクトの場合のインデックスはObject.keys() に基づいた順番のため、順番の保証はされていません。

配列やオブジェクトではなく、整数値を使って指定することもできます。

var app = new Vue({
  el: '#app'
});

<ul id="app">
  <li v-for="n in 5">
    {{ n }}
  </li>
</ul>

この場合、1～5の範囲でループが繰り返されます。
v-forのデモページ6

ここまでv-forを使った例をいくつか試してきましたが、要素の再利用や並び替え時のパフォーマンスなどの理由から、v-forの要素に対して一意なkey属性を与えることが推奨されています。

var app = new Vue({
  el: '#app',
  data: {
    members: [
      {
        name: '天宮こころ',
        birthday: '7月1日',
        height: '150cm'
      }, {
        name: 'エリー・コニファー',
        birthday: '9月27日',
        height: '154.5cm'
      }, {
        name: 'ラトナ・プティ',
        birthday: '10月14日',
        height: '156cm'
      },
    ]
  }
});

例えば今回の場合、nameの値をkeyに設定するとよさそうです。

<ul id="app">
  <li v-for="member in members" v-bind:key="member.name">
    {{ member.name }} {{ member.birthday }} {{ member.height }}
  </li>
</ul>

key属性の設定にはv-bind:keyを使用します。
v-forのデモページ7