Vue如何实现列表渲染,应用有什么
Admin 2022-07-08 群英技术资讯 292 次浏览
in 也可以用 of 代替
<body> <div id="div1"> <li v-for='(p,i) in persons' :key=i> {{p.name}}--{{p.age}} <!-- 张--18 李--19 刘--17 --> </li> </div> </body> <script type="text/javascript"> Vue.config.produnctionTps=false new Vue({ el:"#div1", data:{ persons:[ {id:'001',name:"张",age:18}, {id:'002',name:"李",age:19}, {id:'002',name:"刘",age:17}, ] } }) </script>
<body> <div id="div1"> <li v-for='(p,k) in persons' :key=k> {{p}}--{{i}} <!-- 张--name 18--age --> </li> </div> </body> <script type="text/javascript"> Vue.config.produnctionTps=false new Vue({ el:"#div1", data:{ persons:{ name:"张", age:18 } } })
<body> <div id="div1"> <li v-for='(p,i) in str' :key=i> {{p}}--{{i}} <!-- a--0 b--1 c--2 d--3 e--4 --> </li> </div> </body> <script type="text/javascript"> Vue.config.produnctionTps=false new Vue({ el:"#div1", data:{ str:"abcde" } }) </script>
<body> <div id="div1"> <li v-for='(p,i) in 5' :key=i> {{p}}--{{i}} <!-- 1--0 2--1 3--2 4--3 5--4 --> </li> </div> </body>
在上面都用的index 作为key,但是在破坏顺序修改dom以及有input内容就会出错。仅在用于渲染页面而不需要修改页面时可用index作为key.
强烈建议用数据的唯一标识,如id、手机号、邮箱号作为key
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM] ,随后Vue进行[新虛拟DOM]与[旧虛拟DOM]的差异比较,比较规则如下:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虛拟DOM中内容没变, 直接使用之前的真实DOM!
②.若虛拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到到页面。
1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
2.如果结构中还包含输入类的DOM:
会产生错误DOM更新==> 界面有问题。
1.最好使用每条数据的唯一标识作 为key,比如id、 手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章给大家分享的是有关vue中tab切换页面实现的内容,tab切换页面的应用场景有很多,小编觉得挺实用的,因此分享给大家做个参考,下面是四种实现tab切换页面的方法,感兴趣的朋友可以参考。
jQuery中清除兄弟元素的方法是什么?在jQuery中,我们想要清楚兄弟元素,可以使用到remove()方法,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
本文实例讲述了JavaScript中的this妙用。分享给大家供大家参考,具体如下:
React路由传参方法有哪些?我们知道React中传参方式有很多,通过路由传参的方式也是必不可少的一种。因此,这篇文章就给大家分享一下React路由传参方法及实现,感兴趣的朋友就继续往下看吧。
这篇文章主要为大家详细介绍了JavaScript实现Tab栏切换特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008