[Vue.js]v-for

v-forを使って配列を操作

```javascript js //データに配列を作っておきます data:{ fruits:['バナナ','りんご','びわ'] ``` ```html html

//fruitsの中身をfruitにいれる{{}}の中身に順番にfruitをいれていく
• {{fruit}}

---

```

• バナナ
• りんご
• びわ

と表示される

第２引数を渡す

```html html

()で囲ってカンマで区切って第二引数
• {{fruit}}

---

```

第２引数では配列のインデックス番号が取得できる

```html html

//(0)バナナ のように表示される
• ({{index}}){{fruit}}

---

<h1>v-forを使ってオブジェクトを操作</h1>
```javascript
js
data:{
//データにオブジェクトを作っておく
    fruits{
        yellow:'バナナ',
        red:'りんご',
        orange:'オレンジ'
    }
}   

html
   <ul>
//valueの中にオブジェクトの値を入れていく
      <li v-for = "value in fruits>{{value}}</li>
    </ul>

第２引数と第３引数で取得できるもの

配列と同じように記述できる

```html //２番目はキー、３番目はインデックス番号を取得できる　 //表示させる中身はliに書く ({{index}}){{fruit}}

---

```

• (0)バナナ

  ---

と表示される