亲宝软件园·资讯

展开

Vue中的v-for列表循环示例详解

海绵宝宝_0113 人气:2

前言

在电商项目的开发中,会用到这样一个问题:商品的陈列我们如果使用原生的js会显得十分臃肿。但是在Vue中,我们可以直接使用列表渲染来实现这样的效果。

1. v-for

v-for指令用于渲染一个列表,它接受一个数组或者对象,然后使用一个模板来渲染每个元素。

v-for指令需要使用item in items的语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。

在vue中,使用v-for指令不仅可以渲染数组,还可以渲染对象。当使用v-for渲染对象时,它会遍历对象的属性名。

1.1 数组

这里我们使用一个数组来渲染一个列表。

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

在上面我们写了一个ul标签,然后使用v-for指令来渲染一个数组。这里我们使用了item in items的语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。

    var vm = new Vue({
        el: '#app',
        data: {
            items: [
                11,22,33
            ],
        }
    });

渲染结果:

当然在使用v-for来遍历数组的时候,还可以添加另外一个属性。这里我们使用index作为数组的索引。

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

渲染结果:

tips:

记得两个属性之间要添加逗号。

1.2 对象

前面我们看了数组的渲染,那么我们也可以使用v-for来渲染对象。

<div id="app">
    <ul>
        <li v-for="(value,key,index) in object">{{index}}:{{key}}:{{value}}</li>
    </ul>
    var vm = new Vue({
        el:'#app',
        data:{
            obj:{
                name:'张三',
                age:18,
            }
        },
    });

结果如下:

在遍历对象的时候,我们这里填写了三个属性,分别是value,key,index。其中value是对象的值,key是对象的键,index是索引。

通过结果也显而易见。

2. v-for的key

在使用v-for来渲染列表的时候,我们需要为每一个节点添加一个唯一的key属性。这样做的好处是可以提高渲染的效率。

众所周知,在vue中有一个虚拟dom,通过虚拟dom可以极大的提高渲染的效率。当我们使用v-for来渲染一个列表的时候,vue会根据key来判断节点是否需要更新。如果key不变,那么vue会复用节点,如果key变了,那么vue会重新渲染节点。

也就是说,如果我们需要给对象或者数组添加/删除元素,vue会先比较哪些元素变了,哪些元素没变。变了的元素,dom才会更新,没有发生改变的,dom就直接拿过来使用。这样就极大的提高了渲染的效率。

补充:v-for中key属性的意义

举个例子如
<li v-for="(item,index) in anime" :key="item">{{index+1}}-{{item}}</li>
或者
<td v-for="(value,name,index) of obj" :key="index">
武器 {{value}} <br>人物 {{name}}  <br>排名 {{index}}
</td>

v-for遍历对象,这里的key是个形参,它指的是对象里的属性名,可以是id,name或者什么

而其他时候,在我们使用v-for时,建议给对应的元素或组件添加一个key属性

主要是为了更加高效的更新虚拟DOM,便于diff算法

假设要在一个节点列表abcde的bc之间插入一个新节点f,在添加key属性前,算法默认是将c更新成f,d更新成c,e更新成d,最后再插入e,这样是几步?大家可以数一下

而在添加key属性后,key为每一个节点做了一个标识,算法可以准确高效的在要求的位置插入新节点,也就不会再那样一次更新消耗资源了

官方的解释:key属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes;

如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;

而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素;

详细来说,我们知道,vue实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

总结

加载全部内容

相关教程
猜你喜欢
用户评论