v-for详解

v-for的引入

• 当我们需要对一组数据进行渲染时，我们就可以使用v-for来完成

v-for遍历数组

• 格式：v-for="(item, index) in items"。（也许是因为item显得更加重要，所以将item排在前面）
  • 格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index

<ul>
    <li v-for="(item,index) in anime">{{index+1}}-{{item}}</li>
</ul>

data: {
    anime: ['进击的巨人', '狐妖小红娘', '天宝伏妖录', '东京食尸鬼'],

v-for遍历对象

• 格式：v-for="(value, key, index) in info"。（参数按照重要程度排序）
  • 参数说明：key和index为可选参数

<ul>
    <li v-for="(value,key) in info">{{key}}:{{value}}</li>
</ul>

data: {
    info: {
        name: "super咖啡",
        age: 21,
        height: 1.68
     }

v-for遍历数字

• 格式：v-for="count in counts"
• 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始

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

v-for的key属性

• 在我们使用v-for时，建议给对应的元素或组件添加一个key属性
• 为何要添加一个key属性？主要目的就是为了高效的更新虚拟DOM

• 假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前，diff算法默认是将c更新成f，d更新成c，e更新成d，最后再插入e

  

• 而在添加key属性后，key为每一个节点做了一个标识，diff算法可以准确高效的在要求的位置插入新节点

  

• 为key赋的值必须要与元素具有一一对应的关系

<li v-for="(item,index) in anime" :key="item">{{index+1}}-{{item}}</li>