1.for in 是原生js的循环语句,用于循环遍历对象的属性。
example0:
var obj = {
name: "sunn",
age: 22,
address: "sz"
}
for (let key in obj) {
console.log("key", key);
}
输出:key name
key age
key address
********尽量不用用它来操作数组。***********
2. v-for in 是vue的语法,可以操作数组或对象。在原生html文件引入vue.js文件可以不用key,如果是在vue文件中则一定要加key,不然会存在报错,key值必须唯一。
example1:对象数组, 返回的是数组的值即对象{}
obj: [{
name: "sunn",
age: 23
},
{
name: "zs",
age: 22,
}]
<div v-for="item in obj">
{{ item }}
</div>
result:
{ "name": "sunn", "age": 23 }
{ "name": "zs", "age": 22 }
可以使用.获取结果里面的属性值 例如item.name或者item["name"]
***************************
example2:数组 返回的是数组的值,即数字,可以把例子1里的对象看成整体,把它对应数字。
arr: [2, 4, 5, 6, 7, 8, 10]
<div v-for="item in arr">
{{ item}}
</div>
result:
2,4,5,6,7,8,10
PS:以上两者都可以接收第二个参数作为索引即(item,index) in items。可以用of代替in作为分隔符,此时的操作类似于JavaScript里面的for in。
*************************************************
example3:对象 返回的是对象的值。
obj: {
name: "sunn",
age: 23,
address: "sz"
}
<div v-for="item in obj">
{{ item }}
</div>
result:
sunn 23 sz
如果想要获取到键值,可以使用第二个参数,想获取到索引,可以使用第三个参数。这两者可选。
<div v-for="(value,name,index) in obj">
{{ value }} {{ name }} {{ index }}
</div>
result:
sunn name 0; 23 age 1; sz address 2;