vue的就地复用--- v-for与:key
v-for遵循的是vue的就地复用原则。文本与数据是绑定的,所以当文本被重新渲染的时候,列表也会被重新渲染。
就地复用只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。【比如表单输入值的列表渲染输出】。这种就地复用原则在一般的列表展示的场景中不会有问题。但是:如果列表元素存在于用户交互的场景【比如form表单或者重新排序等】中,就可能会报错,最好在v-for的同时设置key参数。
因为vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。而key指向的是列表中每个元素的唯一值,key
的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。使用 :key,vue会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
<!-- 使用v-for更新已渲染过的元素列表 为防止v-for报错, 一定要v-bind绑定key key是唯一的,指向列表中每个元素的唯一值 -->
<div class="info url log" v-for="(item,index) in moreListData" :key="index">
对于v-for和:key的使用原理,还是不太理解,如果有大佬路过看到,欢迎赐教,待补充
vue的就地复用--- v-for与:key的更多相关文章
- Vue 循环 [Vue warn]: Avoid using non-primitive value as key
页面中不添加 :key 索引的时候,会不停的提示虚线,但不影响使用 后来加了一个索引,加成了:key= "content" 从后台取出来的contents是一个list,里面有多 ...
- Vue 就地复用策略注意事项
---template部分 div el-popover(ref="message", placement="top-start", title="标 ...
- 打造 Vue.js 可复用组件
Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...
- vue中 给router-view 组件的 绑定 key 的原因
不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...
- VUE 是个 M V VM框架
vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...
- Vue.js的复用组件开发流程
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...
- [Vue warn]: Avoid using non-primitive value as key
<el-select v-model="addform.province" placeholder="请选择省份" multiple> ...
- vue开发可复用组件
组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合. 开发可复用性的组件应遵循以下原则: 1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平 ...
- Vue.js 组件复用和扩展之道
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...
随机推荐
- linux清除git账号密码
执行vi ~/.git-credentials,可以看到被保存的账号密码,删掉或者修改都可以了! eg:http://账号:密码@git仓库http地址
- useState 的介绍和多状态声明(二)
useState的介绍 useState是react自带的一个hook函数,它的作用是用来声明状态变量. 那我们从三个方面来看useState的用法,分别是声明.读取.使用(修改).这三个方面掌握了, ...
- http://stblog.baidu-tech.com/?p=1684) coredump调试记录 - PHP篇 原创: 扶墙 贝壳产品技术 今天
http://stblog.baidu-tech.com/?p=1684) coredump调试记录 - PHP篇 原创: 扶墙 贝壳产品技术 今天
- Android开发--IntentService的用法,你错过了什么
Android开发--IntentService的用法,你错过了什么 . 本文链接:https://blog.csdn.net/smbroe/article/details/45009721 Inte ...
- postgre alter命令修改字段
参考文档:https://www.yiibai.com/postgresql/postgresql_alter_command.html PostgreSQL ALTER TABLE命令用于添加,删除 ...
- Jmeter之__CSVRead随机读取变量
背景:当你需要从一些数据中随机的取值用的话可以用这个函数来实现__CSVRead __CSVRead函数用于对脚本进行参数化,当脚本中不同变量需要不同参数值时,可以考虑__CSVRead函数. _CS ...
- ABAP DEMO 年月的搜索帮助
效果图: *&---------------------------------------------------------------------* *& Report YCX_ ...
- mybatis 枚举typeHandler
枚举typeHandler 在绝大多数情况下,typeHandler因为枚举而使用,MyBatis已经定义了两个类作为枚举类型的支持,这两个类分别是: •EnumOrdinalTypeHandler. ...
- Gson反序列json到实体类
gson在基准测试过程中各项性能接近于Jackson(具体可以看Benchmark of Java JSON libraries)里面的测试, 本人亲测过,实测结果与他的数据一致,Jackson安全性 ...
- 【serviceaccount 和 clusterrolebinding】
kubectl get clusterrolebinding kubectl create clusterrolebinding suosheng-rebinding --clusterrole=cl ...