zoukankan      html  css  js  c++  java
  • 列表渲染

    用 v-for 把一个数组对应为一组元素

    v-for指令:
        1.用于展示列表数据
        2.语法:v-for="(item, index) in xxx" :key="yyy"
        3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
     
    react、vue中的key有什么作用?(key的内部原理)
                            
                            1. 虚拟DOM中key的作用:
                                            key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,  随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
                                            
                            2.对比规则:
                                        (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
                                                    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
                                                    ②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

                                        (2).旧虚拟DOM中未找到与新虚拟DOM相同的key, 创建新的真实DOM,随后渲染到到页面。
                                                    
                            3. 用index作为key可能会引发的问题:
                                                1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
                                                                会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

                                                2. 如果结构中还包含输入类的DOM:
                                                                会产生错误DOM更新 ==> 界面有问题。

                            4. 开发中如何选择key?
                                                1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
                                                2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示, 使用index作为key是没有问题的。
    代码举例
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>列表渲染</title>
            <script type="text/javascript" src="../js/vue.js"></script>
        </head>
        <body>
            <!-- 准备好一个容器-->
            <div id="root">
                <h2>人员列表</h2> 
                <ul>
                    <li v-for="person in persons" :key="person.id">
                        {{person.name}}-{{person.age}}-{{person.sex}}
                    </li>
                </ul>
            </div>
    
            <script type="text/javascript">
                Vue.config.productionTip = false
                new Vue({
                    el:'#root',
                    data:{
                        keyWord:'',
                        persons:[
                            {id:'001',name:'brace',age:19,sex:''},
                            {id:'002',name:'wangxq',age:20,sex:''},
                            {id:'003',name:'jack',age:21,sex:''},
                            {id:'004',name:'tanglb',age:22,sex:''}
                        ]
                    },              
                }) 
            </script>
    </html>

    结果展示:

      
  • 相关阅读:
    【转载】SAP_ECC6.0_EHP4或SAP_ECC6.0_EHP5_基于Windows_Server_2008R2_和SQL_server_2008下的安装
    使用delphi 开发多层应用(二十四)KbmMW 的消息方式和创建WIB节点
    使用delphi 开发多层应用(二十三)KbmMW 的WIB
    实现KbmMw web server 支持https
    KbmMW 服务器架构简介
    Devexpress VCL Build v2014 vol 14.1.1 beta发布
    使用delphi 开发多层应用(二十二)使用kbmMW 的认证管理器
    KbmMW 4.50.00 测试版发布
    Basic4android v3.80 beta 发布
    KbmMW 认证管理器说明(转载)
  • 原文地址:https://www.cnblogs.com/ftx3q/p/15320845.html
Copyright © 2011-2022 走看看