Vue中的v-for循环key属性注意事项小结


Posted in Javascript onAugust 12, 2018

当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。

在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个,

Vue中的v-for循环key属性注意事项小结

然后输入ID和Name,点击添加按钮之后,就会出现如下这种情况,刚添加的元素被选中。如果绑定了key属性,则不会出现这种情况。

Vue中的v-for循环key属性注意事项小结

完整的代码:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
<body>
 <div id='app'>
  <!--v-for循环普通数组-->
  <div>
   <label>ID:<input type="text" v-model="id"></label>
   <label>Name:<input type="text" v-model="name"></label>
   <input type="button" value="添加" @click="add" />
  </div>
  <!--注意:v-for循环的时候,key属性只能使用number或string -->
  <!--注意:key使用的时候,必须使用v-bind绑定属性的形式,指定key的值 -->
  <!-- 在组件中,使用 v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,
   必须在使用v-for的同时,指定唯一的 字符串/数字 类型:key 值-->
  <p v-for="item in list" :key="item.id">
   <input type="checkbox"/>
   {{item.id}}--{{item.name}}
  </p>
  
 </div>
</body>
<script src="vue.min.js"></script>
<script>
 var vm = new Vue({
  el:'#app',
  data:{
   id:"",
   name:"",
   list:[
    {id:1, name:'李斯'},
    {id:2, name:'嬴政'},
    {id:3, name:'赵高'},
    {id:4, name:'韩非'},
    {id:5, name:'荀子'},
   ],
  },
  methods:{
   add(){
    this.list.unshift({id:this.id,name:this.name});
   }
  }
 });
</script>
</html>

总结

以上所述是小编给大家介绍的Vue中的v-for循环key属性注意事项小结,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
Vue头像处理方案小结
Jul 26 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
JS高级程序设计之class继承重点详解
Jul 07 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 #Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 #Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 #Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 #Javascript
axios向后台传递数组作为参数的方法
Aug 11 #Javascript
You might like
substr()函数中文版
2006/10/09 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php读取3389的脚本
2014/05/06 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python比较两个列表是否相等的方法
2015/07/28 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Django分组聚合查询实例分享
2020/04/29 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
计算机网络专业求职信
2014/06/05 职场文书
争做文明公民倡议书
2014/08/29 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL