###### 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*
*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*
Sign in with Wallet
Connect another wallet