Vue.jsの基本(9)v-forの使い方

Vue.jsの基本(9)v-forの使い方

dataの値が配列の場合、v-forディレクティブを使用することでリスト形式で描画することができます。

v-forディレクティブは「 item in items」の形式で配列のitemを一つずつリストにして書き出すことができます。

HTMLコード

<ul>
    <li v-for="ingredient in ingredients">{{ingredient}}</li>
</ul>

JavaScriptコード

var app = new Vue({
  el:'#app',
  data:{
      ingredients:['meat','fruit','cookies'],
      persons:[
          {name:'Tokugawa',age:50,color:'red'},
          { name: 'Toyotomi', age: 40, color: 'blue' },
      ]
  }
})

次のようにすることでインデックス番号を表示することもできます。

<li v-for="(ingredient,index) in ingredients">({{index+1}}){{ingredient}}</li>

オブジェクトをリストに書き出す方法

v-forディレクティブはオブジェクト形式のものをリストとして書き出すこともできます。

<ul>
    <li v-for="person in persons">{{person.name}}</li>
</ul>

さらに詳細に書き出す方法
v-forの値には次のように3つ引数を入れることができます。
(index,key,value)

<ul>
    <li v-for="person in persons"><p v-for="(value,key) in person">{{key}}:{{value}}</p></li>
</ul>