Vue列表渲染

2022-07-17 10:03:14 阅读：170 来源： 互联网

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>

标签：Vue,name,DOM,age,渲染,列表,虚拟,key,id
来源： https://www.cnblogs.com/luoking/p/16485952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue列表渲染

v-for的基本使用

key的原理