Vue.jsの基本（9）v-forの使い方

• Vue.jsの基本（1）Vue.jsの基本的な使い方
• Vue.jsの基本（2）dataプロパティについて
• Vue.jsの基本（3）computedとmethodsの違い
• Vue.jsの基本（4）監視プロパティについて
• Vue.jsの基本（5）コンポーネント作成
• Vue.jsの基本（6）親コンポーネントから子コンポーネントへデータを渡す方法
• Vue.jsの基本（7）classとスタイルのバインディング
• Vue.jsの基本（8）v-ifのポイント
• 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>