vue v-for详解

v-for的作用：

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

v-for常见四种使用方法分别是：

1.使用v-for循环一个简单的数组

2.使用v-for循环一个复杂的数组

3.使用v-for循环对象

4.v-for循环一个迭代的数字

            
            
           
{{item}}
           
索引值：{{i}}---每一项：{{item}}


           
           
索引值：{{i}}--id：{{item.userid}}---姓名：{{item.username}}


                   
           
           
id：{{val}},name:{{key}},index:{{i}}


           
           
这是第{{count}}次循环

v-for遍历数组

• 格式：v-for="(item, index) in items"

格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index

    
{{index+1}}-{{item}}

data: {
    anime: ['三体', '狐妖小红娘', '天宝伏妖录'],

v-for遍历对象

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

参数说明：key和index为可选参数

    
{{key}}:{{value}}

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

v-for遍历数字

• 格式：v-for="count in counts"

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

这是第{{count}}次循环

v-for的key属性

• 在我们使用v-for时，建议给对应的元素或组件添加一个key属性

• 为何要添加一个key属性？主要目的就是为了高效的更新虚拟DOM

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

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

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

{{index+1}}-{{item}}

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性：

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

v-for中key的使用注意项：

v-for在循环时，key属性只能使用number获取string

key在使用时只能使用v-bind的属性绑定的形式，指定key的值

在组件中使用v-for的时候，或者在一些特殊的时候v-for使用有问题的时候，必须在使用v-for的同时指定唯一的字符或者number类型：key值