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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
bootstrap css样式之表单
Jan 19 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
JS中常用的消息框总结
Feb 24 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
vue实现简单的日历效果
Sep 24 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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
博士208HAF收音机实习报告
2021/03/02 无线电
Banner程序
2006/10/09 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python制作CSDN免积分下载器
2015/03/10 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
微信公众号token验证失败解决方案
2019/07/22 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
使用Python函数进行模块化的实现
2019/11/15 Python
linux面试题参考答案(4)
2013/01/28 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
幼儿园教师请假制度
2014/01/16 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
作文批改评语大全
2014/04/23 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
会计工作态度自我评价
2015/03/06 职场文书
英语通知范文
2015/04/22 职场文书
军事理论课感想
2015/08/11 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js