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 事件冒泡简介及应用
Jan 11 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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 _autoload自动加载类与机制分析
2012/02/10 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php时区转换转换函数
2014/01/07 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
vue.js 获取select中的value实例
2018/03/01 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
python中redis的安装和使用
2016/12/04 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python exit出错原因整理
2020/08/31 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
护士实习生自我鉴定范文
2013/12/10 职场文书
毕业生自荐信
2013/12/14 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
信息总监管理职责范本
2014/03/08 职场文书
勾股定理课后反思
2014/04/26 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
爱的承诺书
2015/01/20 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers