---
# System prepended metadata

title: 【自學筆記】從0開始學Vue - Day4 列表渲染v-for
tags: [javascript, front-end, vue]

---

###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day4 列表渲染v-for

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

**`v-for`類似`forEach`的功能，主要用於渲染元素或是模板內容。**

`v-for`指令需要使用`item in items`形式來做撰寫
而`v-for`會因為後方`items`接的是 **物件** 還是 **陣列** 而==傳入不同對應內容==

:::info
陣列渲染
:::

v-for設定在元素上依照其陣列重復渲染相同的模板，以下例子:

```htmlembedded=
<div id="app">
    <div v-for="item in item_array">{{item}}</div>
</div>
```
```javascript=
var vm = new Vue({
    el: "#app",
    data: {
        item_array: ['one', 'two', 'three']
    }
});
```

`v-for` 的語法 `item in items_array`，中間以 `in` 分開為:

`item` : 每個元素的資料。
`items_array` : 原本的陣列資料。

item會綁定陣列中單一元素的資料，one、two、three

**陣列的元素也可以是物件**

```htmlembedded=
<div id="app">
    <div v-for="item in objItems">
        Eng: {{item.name}}, Number: {{item.number}}
    </div>
</div>

```
```javascript=
var vm = new Vue({
    el: "#app",
    data: {
        objItems: [
          {name: 'one', number: 1},
          {name: 'two', number: 2},
          {name: 'three', number: 3}
        ]
    }
});
```
**index參數**
除了基本的`item in items` 語法，還可以用`(item, index) in items` ，使用index參數就可以知道目前的元素是第幾個資料。

```htmlembedded=
<div id="app">
    <div v-for="(item, index) in objItems">
        index is {{index}} --> {{item}}
    </div>
</div>

```
```javascript=
var vm = new Vue({
    el: "#app",
    data: {
        objItems: [
          {name: 'one', number: 1},
          {name: 'two', number: 2},
          {name: 'three', number: 3}
        ]
    }
});
```

:::info
物件渲染
:::

v-for對物件使用，語法跟陣列相同，但其出來的資料是屬性值，如下例:
```htmlembedded=
<div id="app">
    <div v-for="value in obj">
        {{value}}
    </div>
</div>

```
```javascript=
var vm = new Vue({
    el: "#app",
    data:{
        obj: {
            data1: 'one',
            data2: 'two',
            data3: 'three'
        }
    }
});
```
**其他參數**

除了基本的`value in obj`語法，跟陣列一樣可以加上其他參數使用
* `(value, key) in obj` : 第二個參數為屬性的建值。
* `(value, key, index) in obj` : 第三個參數為巡覽的 index 。

>物件的巡覽是使用`Object.keys()`，並不保證順序會跟原本的相同，例如 
>`Object.keys({2: 'two', 0: 'zero', 1: 'one' })`
>出來的結果會是 
>`[ "0", "1", "2" ]`
>因此 v-for 不能保證其順序。

:::info
使用範圍做列表渲染
:::
陣列及物件的渲染方式，它還有一種用範圍來渲染的方式，例如
```htmlembedded=
<div id="app">
    <div v-for="n in 10">
        {{n}}
    </div>
</div>
```

---

*參考資料: https://reurl.cc/ErW5NK*
*參考資料: https://reurl.cc/j1p0ey*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*