VUE列表渲染 FOR-IN和FOR-OF的區別

全文總結

• V-for循環遍歷數組時推薦使用of，語法格式為(item，index)

  • item:迭代時不同的數組元素的值
  • index:當前元素的索引

• V-for循環遍歷對象時推薦使用in，語法格式為(item,name,index)

  • item:迭代時對象的鍵名鍵值
  • name:迭代時對象的鍵名
  • index:當前元素的索引

• 在遍歷對象時，會按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下都一致。

• v-for也可以在實現了可迭代協議的值上使用，包括原生的Map和Set。

示例

V-FOR遍歷數組

DATA:
    list:[
        {name:'1'},
        {name:'2'},
        {name:'3'}，
    ]

html:
<div class="items" v-for='(item,name,index) of list'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in list'>{{item}}->{{name}}->{{index}}</div>

輸出結果：
	{ "name": "1" }->0->
	{ "name": "2" }->1->
	{ "name": "3" }->2->
	{ "name": "1" }->0->
	{ "name": "2" }->1->
	{ "name": "3" }->2->

V-FOR遍歷對象

DATA:
    listObject:{
        name:'soho',
        age:25,
        class:1909,
        grade:3
    } 

html:
<div class="items" v-for='(item,name,index) of listObject'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in listObject'>{{item}}->{{name}}->{{index}}</div> 

輸出結果：
    soho->name->0
    25->age->1
    1909->class->2
    3->grade->3
    soho->name->0
    25->age->1
    1909->class->2
    3->grade->3