【前端框架学习】v-for指令和key属性

1.迭代数组

<p v-for="item in list">{{item}}</p>

data: {
    list: [1, 2, 3, 4, 5, 6]
}

当然，我们需要用到数组中某一项的索引值时，可以写：

<p v-for="(item, i) in list">索引值是{{i}}----每一项的值是{{item}}</p>

除了循环普通数组以外，我们也可以循环复杂数组：

<p v-for="user in list2">{{user.id}}----{{user.name}}</p>

data: {
    list2: [
        { id: 1, name: 'jerry1' },
        { id: 2, name: 'jerry2' },
        { id: 3, name: 'jerry3' },
        { id: 4, name: 'jerry4' }
    ]
}

对于复杂数组来说，同样可以添加索引，这里就不再演示。

2.迭代对象中的属性

遍历对象身上的键值对的时候，除了有val key，第三个位置上还有一个索引，但索引用的不多。

<!--循环对象,索引永远在第二位-->
<p v-for="(val, key) in user">val:{{val}} --- key:{{key}}</p>
    

data: {
    user: {
        id: 1,
        name: 'jerry',
        gender: 'male'
    }
}

3.迭代数字

<p v-for="count in 10">这是第 {{count}} 次循环</p>

注意：如果使用v-for迭代数字的话，前面的count值从1开始。

4.总结

in后面可以放普通数组，对象数组，对象，还可以放数字，需要注意的是，2.2.0+的版本里，当在组件中使用v-for时，key现在是必须的。
 

        当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定素引下显示已被渲染过的每个元素。

        为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排现有元素，你需要为每项提供一个唯一key属性。