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的更多相关文章

  1. Vue 循环 [Vue warn]: Avoid using non-primitive value as key

    页面中不添加  :key 索引的时候,会不停的提示虚线,但不影响使用 后来加了一个索引,加成了:key= "content" 从后台取出来的contents是一个list,里面有多 ...

  2. Vue 就地复用策略注意事项

    ---template部分 div el-popover(ref="message", placement="top-start", title="标 ...

  3. 打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...

  4. vue中 给router-view 组件的 绑定 key 的原因

    不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...

  5. VUE 是个 M V VM框架

    vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...

  6. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  7. [Vue warn]: Avoid using non-primitive value as key

    <el-select v-model="addform.province" placeholder="请选择省份" multiple>        ...

  8. vue开发可复用组件

    组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合.   开发可复用性的组件应遵循以下原则:   1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平 ...

  9. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...

随机推荐

  1. 天池移动推荐算法赛--https://github.com/PnYuan/Tianchi-BigData

    参考: https://blog.csdn.net/Snoopy_Yuan/article/details/75808006

  2. SQL Server 查找空值

    需要查找某一列为空的数据 )NULL不能用 “=”运算符 )NULL不支持+-*/ <> )不同的函数对NULL的支持不一样,使用前要测试,不能靠猜,不能凭经验

  3. PHP 对象继承

    对象继承 继承已为大家所熟知的一个程序设计特性,PHP 的对象模型也使用了继承.继承将会影响到类与类,对象与对象之间的关系. 比如,当扩展一个类,子类就会继承父类所有公有的和受保护的方法.除非子类覆盖 ...

  4. 字典树(查找树) leetcode 208. Implement Trie (Prefix Tree) 、211. Add and Search Word - Data structure design

    字典树(查找树) 26个分支作用:检测字符串是否在这个字典里面插入.查找 字典树与哈希表的对比:时间复杂度:以字符来看:O(N).O(N) 以字符串来看:O(1).O(1)空间复杂度:字典树远远小于哈 ...

  5. 【PHP】php7.2报错The each() function is deprecated. This message will be suppressed on furthe

    php7.2以上 废除了 each()方法,项目中用到的地方会出现以下报错 The each() function is deprecated. This message will be suppre ...

  6. Qt编写气体安全管理系统18-数据库设置

    一.前言 作为一个管理系统,数据库肯定是不可或缺的,Qt内置的sqlite数据库已经是够用的,而且本人亲测数据量能支持亿级别,而不是像网上很多人说的千万级别,我模拟过一亿多条数据,依然能够很好的查询, ...

  7. bladex调用网关使用oauth2统一获取授权

    一:启动网关服务(需要启动其它服务,如:AuthApplication .UserApplication.BladeLogApplication,及自己添加的代码服务) 二:http://localh ...

  8. fa-list-alt

    你可以用 <i> 标签把 Font Awesome 图标放在任意位置. <i class="fa fa-list-alt" aria-hidden="t ...

  9. 登录另一台linux主机并且执行相应的命令

    [root@bogon ~]# cat a.sh #!/bin/bash ssh root@192.168.0.98 'ls /root'

  10. swift 日历的制作

    制作日历步骤 1.日期数据的处理,这个可以 添加 extension 解决 extension NSDate{ /*几年几月 这个月的多少天*/ class func getDaysInMonth( ...