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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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 tp验证表单与自动填充函数代码
2012/02/22 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Bootstrap插件全集
2016/07/18 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
户外婚礼策划方案
2014/02/08 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
经济类毕业生求职信
2014/06/26 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
信息技术研修心得体会
2016/01/08 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
python基础之文件操作
2021/10/24 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS