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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
Vue实现选择城市功能
May 27 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
vue实现学生信息管理系统
May 30 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
微信小程序实现文件预览
Oct 22 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
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
项目开发计划书
2014/01/09 职场文书
学校师德承诺书
2014/05/23 职场文书
人力资源职位说明书
2014/07/29 职场文书
党委班子对照检查材料
2014/08/19 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书