Vue学习总结（十）——循环遍历 v-for指令

最新推荐文章于 2025-09-11 10:00:00 发布

原创最新推荐文章于 2025-09-11 10:00:00 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

Vue学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue中v-for指令的使用，包括如何遍历数组和对象，以及在遍历过程中如何获取索引和值。同时强调了在使用v-for时添加key属性的重要性，key的作用在于提高虚拟DOM的Diff算法效率，实现高效地更新列表。

1、v-for遍历数组

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

v-for的语法类似于JavaScript中的for循环。
格式如下： item in items的形式。

（1）在遍历的过程中，没有使用索引值，下标值。语法格式：v-for="item in items"

（2）如果在遍历的过程中，我们需要拿到索引值。语法格式：(item, index) in items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--1.在遍历的过程中，没有使用索引值（下标值）-->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <!--2.在遍历的过程中，获取索引值-->
    <ul>
        <li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['why', 'kobe', 'gay yang', 'baby']
        }
    })
</script>
</body>

执行结果如下：

2、v-for遍历对象

（1）在遍历对象的过程中，如果只是获取一个值，那么获取到的是value，因为value比较重要。

（2）获取key和value 格式：（value， key）

（3）获取key和value和index 格式：（value， key， index）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value，因为value比较重要-->
    <ul>
        <li v-for="(value) in info">{{value}}</li>
    </ul>
    <!--2.获取key和value  格式：（value， key）-->
    <ul>
        <li v-for="(value, key) in info">{{value}}-{{key}}</li>
    </ul>
    <!--3.获取key和value和index 格式：（value， key， index）-->
    <ul>
        <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            info: {
                name: 'why',
                age: 18,
                height: 1.88
            }
        }
    })
</script>
</body>

执行结果如下：

3、组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个：key属性

为什么需要这个key属性呢？

这个其实和Vue的虚拟DOM的Diff算法有关系。当某一层有很多相同的节点，也就是列表节点的时。我们希望插入一个新的节点。我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E，这样很没有效率。所以我们需要使用key来给每个节点做一个唯一标识。

Diff算法就可以正确的识别此节点。

找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--key一定要是唯一性的，所以key不能使用index要用item-->
    <ul>
        <li v-for="item in items" :key="item">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            items: ['A', 'B', 'C', 'D', 'E']
        }
    })
</script>
</body>