【Vue.js】リストレンダリング:v-for

v-forを使って、繰り返し処理をします。配列の場合とオブジェクトの場合を見ていきます。若干、書き方が異なるので注意してください。

v-for:配列

配列をv-forで処理する書き方です。

<div id="app">
  <ul>
    <li v-for="color in colors">{{color.name}}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    colors: [
      { name: 'red' },
      { name: 'green' },
      { name: 'blue' },
    ]
  }
});

配列のindexも取得できます。HTML側でindexを取得するようにします。

<div id="app">
  <ul>
    <li v-for="(color, index) in colors">{{index}}.{{color.name}}</li>
  </ul>
</div>

v-for:オブジェクト

オブジェクトをv-forで処理する書き方です。

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

var app = new Vue({
  el: '#app',
  data: {
    object: {
       title: 'Untitled',
       author: 'Unknown',
       publishedAt: 'YYYY-MM-DD'
    }
  }
});

オブジェクトのkeyとindexも取得できます。HTML側でkeyとindexを取得するようにします。

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

参考サイト

• リストレンダリング — Vue.js