Vue列表渲染

v-for的基本使用

        v-for指令：
            1. 用于展示列表数据
            2. 语法 ：v-for="(item,index) in XXX" :key="YYY"
            3. 可以遍历 ：数组，对象，字符串（用的少），指定次数（用的少）
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul>
            <li v-for="p in persons">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <ul>
            <!-- a为属性值，b为属性 -->
            <li v-for="(a,b) in car">  
                {{b}}-{{a}}
            </li>
        </ul>
        <!-- 遍历字符串  -->
        <ul>
            <!-- a为值，b为索引 -->
            <li v-for="(a,b) in name">
                {{a}}-{{b}}
            </li>
        </ul>
 
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "妞妞",
                persons:[
                    {id:001,name:"张三",age:18},
                    {id:002,name:"李四",age:19},
                    {id:003,name:"王五",age:20}
                ],
                car:{
                    name:"autoA8",
                    price:"200万",
                    address:"德国"
                }
            }
        })
    </script>
</body>

key的原理

vue中的key的作用（key的内部原理）
        1. 虚拟DOM中key的作用：
            key是虚拟DOM对象的标识，当数据发生改变时，Vue会根据【新数据】生成【新的虚拟DOM】
            随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下
                对比规则：
                    1.旧虚拟DOM中找到了与新虚拟DOM相同的key：
                        ①。若虚拟DOM中的内容没有改变，直接使用之前的真实ＤＯＭ
                        ②。若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
 
                    2. 旧虚拟DOM中未找到与新虚拟DOM相同的key
                        创建新的真实DOM，随后渲染到页面中
        2. 用index作为key可能会引发的问题：
            ①若对数据进行，逆序添加，逆序删除等破坏顺序操作：
                会产生没有必要的真实DOM更新==> 界面效果没有问题，但效率低
            ②如果结构中还包含输入类的DOM：
                会产生错误的DOM更新==>界面有问题
        ３.开发中如何选择key？
            １．最好使用每一条数据的标识符作为key，比如id，手机号，身份证号，学号等唯一标识
            ２，如果不存在对每一条数据的逆序添加，逆序删除等破坏操作，仅用于渲染列表用于展示，则使用
                index作为key是没有问题的
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <ul>
            <button @click="add">添加老刘</button>
            <!-- 使用用户ｉｄ没有问题 -->
            <li v-for="p in persons" :key="p.id">　
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
 
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "妞妞",
                persons:[
                    {id:001,name:"张三",age:18},
                    {id:002,name:"李四",age:19},
                    {id:003,name:"王五",age:20}
                ]
            },
            methods:{
                add(){
                    this.persons.unshift({id:004,name:"老刘",age:90})
                }
            }
        })
    </script>
</body>
posted @   小罗要有出息  阅读(78)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue条件渲染
·  Vue的其他指令
·  Vue（十二）：列表渲染—— v-for
·  Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）
·  v-for以及key原理
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
SQL AI 助手