リストレンダリング(v-for)

v-forで配列に要素をマッピング

配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです(Vue.js公式)

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

結果

• Foo
• Bar

オブジェクトのv-for

オブジェクトのプロパティに対しても、v-for を使って反復処理ができる。
以下ではオブジェクトのvalueを描画している。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<ul id="app">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      object: {
        name: 'Ryota',
        age: 23,
        gender: 'Male'
      }
    }
  })
  
  // 実際に描画されるHTMLを確認
  console.log(vm.$el)  
</script>

2つ目の引数として、プロパティ(=key)も描画できる

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

結果

• name: 'Ryota'
• age: 23
• gender: 'Male'