【前端框架学习】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.key属性的使用

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

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

例1：

<div>
     <label>Id:
         <input type="text" v-model='id'>
     </label>
     <label>Name:
         <input type="text" v-model='name'>
     </label>
     <!--在尾部添加-->
     <input type="button" value="endAdd" @click="endAdd()">
     <!--在头部添加-->
     <input type="button" value="headAdd" @click="headAdd()">
</div>

<p v-for="item in list3">
     <input type="checkbox">
     {{item.id}} --- {{item.name}}
</p>

data: {
    list3: [
        { id: 1, name: '李斯' },
        { id: 2, name: '赢政' },
        { id: 3, name: '赵高' },
        { id: 4, name: '韩非' },
        { id: 5, name: '荀子' }
    ],
},
methods: {
    endAdd() {//添加方法
        this.list3.push({id: this.id, name: this.name});
    },
    headAdd() {//添加方法
        this.list3.unshift({id: this.id, name: this.name});
    }
}

但可以发现的是，unshift之后，复选框勾选的位置发生了改变。这是因为没有用key，即没有指定用的哪一项。为了防止这个问题，可以在每次for循环的时候指定一个key，这个key在循环中是唯一的。即，<p></p> 标签应改为：

<p v-for="item in list3" :key="item.id">
     <input type="checkbox">
     {{item.id}} --- {{item.name}}
</p>

保证了数据的唯一性，将data身上的数据和页面上的数据强制关联起来。

注意： v-for循环的时候，key属性的值只能是number或者string；key在使用的时候必须使用 v-bind 属性绑定的形式，指定key的值。

5.总结

in后面可以放普通数组，对象数组，对象，还可以放数字；需要注意的是，2.2.0+的版本里，当在组件中使用v-for时，key现在是必须的；在组件中，使用v-fox循环的时候，或者在一些特殊情况中，如果v-fox有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型 :key 值。