前端学习-超强VUE教程05-优快云博客

本文链接：https://blog.youkuaiyun.com/qinjava/article/details/107141392

本文探讨了Vue中v-for指令的使用技巧，强调了key值的重要性，尤其是在列表渲染和DOM操作中。通过实例说明如何选择合适的key值，避免使用index，以提升性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for遍历

数组和对象都可以遍历

一般的列表渲染最好带一个key值，要把key值设置为唯一值的话，可以选择index。但在频繁操作DOM元素相对应的数据的时候，它还是有点浪费性能，可能让Vue没法充分复用DOM节点，所以不太建议用index来做key值

//所以一般的项目中的后端会传递过来一些数据，这些数据可以把它作为key值来使用（一般会携带一个后端或数据库相关的一个唯一的数据条目标识符，例如：id）

在这里插入图片描述

/把key值设置成（item.id）既是唯一的，同时又不是index下标，就能保证key值的使用最终是正确的，性能上最高

//在使用key值的时候，每个循环项最好带一个key值，提高性能；为了让key值达到最优效果，就要把key设为唯一的，尽量不用index下标作为key值

列表渲染关于数组的操作

可以改变原数组的方法

push（）
pop（）
shift()
unshift()
splice()
sort()
reverse()
vm.datalist.push(“1111”) //改变原数组，在数组datalist中加入1111
不改变原数组的方法

filter()
concat()
slice()
map()
注：原数组不改变，若要使用这个值，需要赋值给新的数组再使用

列表数组检测

数组更新检测
在这里插入图片描述

练习案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(data,index) in datalist">
                {{data}}--{{index}}
            </li>
        </ul>
        <ul>
            <li v-for="(obj,key) in objs">
                {{obj}}--{{key}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
      var app = new Vue({
            el: '#box',
            data: {
                isCreated: false,
                datalist: ["111","222","333"],
                objs: {
                abd: "abd1",
                bbb: "bbb1",
                ccc: "ccc1"
            }
            }

        })
    </script>
</body>

</html>