for in 和v-for in

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;

参考链接：for in 和v-for in – 萌新小试 (sunn.asia)

参考链接: 苏恩博客