vue的v-for指令&key属性

当我们有一组数据需要渲染时，可以使用v-for完成

• v-for相当于javascript中的for循环
• 格式：item in items的形式。item为被遍历的元素，items为原数组或对象

v-for遍历数组

两个可选参数

• item：被遍历的元素
• index：该元素的索引

text 代码:

<div id="app">
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in items">{{index}}:{{item}}</li>
    </ul>
</div>

text 代码:

const test = new Vue({
    el:"#app",
    data:{
        items:['a','b','c']
    }
})

运行结果

• a
• b
• c
• 0:a
• 1:b
• 2:c

v-for遍历对象

三个可选参数

• key：被遍历的元素的键名
• value：被遍历的元素的值
• index：该元素的

只有一个参数获取到的是value

text 代码:

<div id="app">
    <ul>
        <li v-for="item in Obj">{{item}}</li>
    </ul>
</div>

运行结果

• liu
• 12
• 男

获取key和value

text 代码:

<div id="app">
    <ul>
        <li v-for="(key,value) in Obj">{{key}}:{{value}}</li>
    </ul>
</div>

运行结果

• name:liu
• age:12
• sex:男

获取key和value和index

text 代码:

<div id="app">
    <ul>
        <li v-for="(key,value,index) in Obj">{{index}}-{{key}}:{{value}}</li>
    </ul>
</div>

const test = new Vue({
    el:"#app",
    data:{
        Obj:{
            name:"liu",
            age:"12",
            sex:"男",
        }
    }
})

运行结果

• 0-name:liu
• 1-age:12
• 2-sex:男

vue建议在使用v-for的同时提供一个key属性给对应的元素

原因

当某一层有许多相同的列表节点的情况下

• A
• B
• C
• D
• E

我们希望在B和C中插入一个节点F,vue的diff算法默认执行情况是这样的
1.先将C更新为F

• A
• B
• F
• D
• E

2.将D更新为C

• A
• B
• F
• C
• E

3.将E更新为D

• A
• B
• F
• C
• D

4.最后将E插入到末尾

• A
• B
• F
• C
• D
• E

在为每个节点添加了一个唯一的key之后，diff算法可以正确的识别此节点，在插入时找到其正确的位置,所以key的主要做用是为了高效的更新虚拟DOM。

text 代码:

<div id="app">
    <ul>
        <li v-for="item in Obj" :key="item">{{item}}</li>
    </ul>
</div>