总结
V-for循环遍历数组时推荐使用of，语法格式为
（item，index）item:在每次迭代时，item会被赋值为不同的数组元素的值。
index:当前元素的索引。
V-for循环对象的时使用in，语法格式为
(item,name,index)item在每次迭代时，item会被赋值为不同的对象的属性值。
name在每次迭代时，name会被赋值为不同的键名。
index当前元素的索引。
用 v-for 渲染数组
VUE渲染数组时,其中可以选择V-for-in与V-for-of结果相同.
语法
/*
of与in的方法遍历数组时相同。
推荐用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。
*/
<p v-for=" (item,index) of list" >
{{index}}-{{item.message}}
</p><p v-for=" (item,index) in list" >
{{index}}-{{item.message}}
</p>item在每次迭代时，item会被赋值为不同的数组元素的值。
index当前元素的索引。
举例
<template>
<div>
<p v-for=" (item,index) in list" v-bind:key="index" >
{{index}}-{{item.message}}
</p>
<hr />
<p v-for="(item,index) of list" v-bind:key="index" >
{{index}}-{{item.message}}
</p>
</div>
</template>
<script>
export default {
data(){
return{
list:[
{message:'soho'},
{message:'john'},
{message:'Marry'}
]
}
}
</script>
/*
注：此案例为了运行，使用了index作为元素的Key这是及其不规范的，实际案例中禁止这样做。
渲染结果都为:
0-{ "message": "soho" }-soho
1-{ "message": "john" }-john
2-{ "message": "Marry" }-Marry
*/
用 v-for 渲染对象
语法
<p v-for="(item,name,index) in listObject" v-bind:key="index">
{{index}}-{{name}}-{{item}}
</p>item在每次迭代时，item会被赋值为不同的对象的属性值。
name在每次迭代时，name会被赋值为不同的键名。
index当前元素的索引。
举例
<template>
<div>
<p v-for="(item,name,index) in listObject" v-bind:key="index">
{{index}}-{{name}}-{{item}}
</p>
</div>
</template>
<script>
export default {
data(){
return{
listObject:{
name:'soho',
age:25,
class:1909,
grade:3
}
}
}
}
</script>
/*
注：此案例为了运行，使用了index作为元素的Key这是及其不规范的，实际案例中禁止这样做。
渲染结果都为:
0-name-soho
1-age-25
2-class-1909
3-grade-3
*/注：在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。