Vue学习之路第十四篇：v-for指令中key的使用注意事项
1、学前准备：
JavaScript中有一个方法：unshift() ，其作用是向数组的开头添加一个或更多元素，并返回新的长度。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
2、直接上代码
<body>
<divi id="app">
序号：<input type="text" v-model="idValue"/> 
车名：<input type="text" v-model="nameValue"/> 
<button v-on:click="add()">添加</button>
<p v-for="item in list">
<input type="checkbox" name="car"></checkbox>序号：{{item.id }} , 车名：{{ item.name }}<br/>
</p>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
idValue:'',
nameValue:'',
list:[
{id:1,name:'奥迪'},
{id:2,name:'宝马'},
{id:3,name:'奔驰'},
{id:4,name:'劳斯莱斯'},
{id:5,name:'玛莎拉蒂'}
]
},
methods:{
add(){
this.list.unshift({
id : this.idValue,
name : this.nameValue
});
}
}
})
</script>
</body>
这里我们定义了一个list集合，并通过在input中输入内容，然后把新的车型添加到list集合中并显示在页面上。运行结果如下：
我们在第一个input框中填入数字6，第二个input框中添加保时捷车型，点击添加按钮，运行结果如下;
看页面信息好像我们已经添加成功了，没有什么问题。现在我们把序号为5的玛莎拉蒂复选框勾上，然后再点击添加按钮，看看有什么现象。
What?明明勾的是玛莎拉蒂怎么变成劳斯莱斯了！原因就在于v-for指令只能简单的实现数据的遍历，当你的数据发生变化的时候，由于数据和指令的唯一关联就是遍历时的数组下标，所以当你勾选玛莎拉蒂的时候，指令记住了你勾选的数组下标为5（数组下标是从0开始的），当你往数组里添新元素之后，虽然数组长度变了，但是指令只记得你当时勾选的数组下标，于是就帮你把新数组中下标为5的劳斯莱斯给勾选了。为了解决这种问题，在使用v-for指令的时候我们需要加入一个新属性：key，写法为key="XX"，其中XX必须具有唯一性，即可以通过key来识别出对应的遍历元素。
<p v-for="item in list" v-bind:key="item.id">
<input type="checkbox" name="car"></checkbox>
序号： {{item.id }} , 车名：{{ item.name }}<br/>
</p>
这里在v-for指令里加入了key属性，通过属性绑定指令v-bind绑定了元素的序号，即通过序号来识别每个数组元素（当然这个时候你要保证序号不能重复，要具备唯一性，不然勾选序号重复的元素的时候还是会出现上面的问题）。这个时候再把序号为5的玛莎拉蒂复选框勾上，然后再点击添加按钮，看看有什么现象。
保时捷被成功添加了，而且玛莎拉蒂的复选框还是被选中状态。
总结：如果你只是简单的遍历，那么v-for指令完全可以满足，如果还涉及到数组数据的改变或者操作，那么就需要加上属性key来帮助指令来识别每个遍历元素。
每天进步一点点！
Vue学习之路第十四篇：v-for指令中key的使用注意事项的更多相关文章
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- vue学习指南：第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Vue学习之路第十八篇：私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue学习之路第十五篇：v-if和v-show指令
1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...
- python学习之【第十四篇】：Python中的装饰器
1.什么是装饰器? 器即函数 装饰即修饰,意指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 2.遵循的原则 装饰器必须遵循以下两个原则: 不修改被装饰函数的源代码(开放封 ...
- FastAPI 学习之路（十四）响应模型
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
随机推荐
- RedisTemplate Api总结
RedisTemplate 使用总结 最近在做一个项目,考虑到有累计,排行,缓存等功能:而Redis是一个基于内存的数据库,而且提供了 字符串(String), 哈希(Map), 列表(list), ...
- 格式化LInux后开机进入grub怎么办
问题:格式化Linux系统盘之后,重启进入grub 1.grub 引导进入windows系统 进入grub grub>rootnoverify (hd0,1) [可以使用Tab键( 比如 roo ...
- root用户不能改动iptables
需求:因为防火墙做了IP和port限制,如今须要加入一条规则使之能够訪问指定的IP和port. vi /etc/sysconfig/iptables, 加入完毕后,wq保存,提示文件仅仅读无法保存.! ...
- JS清除选择内容的方法
本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...
- MyBatis中sqlSession操作数据库，不报错但无法实现数据修改（增、改、删）
public void addCustomerTest() throws Exception { SqlSession sqlSession = MyBatisUtils.getSession(); ...
- Spring JDBC数据库开发
针对数据库操作,Spring框架提供了JdbcTemplate类. 1.Spring JDBC的配置 创建配置文件applicationContext.xml,添加如下代码: <!--配置数据源 ...
- 排序系列 之 冒泡排序及其改进算法 —— Java实现
冒泡排序算法 冒泡排序算法 改进一 冒泡排序算法 改进二 冒泡排序算法 改进三 冒泡排序算法 基本思想: 在要排序的一组数中,对当前还未排好序的范围内的全部数据,自上而下对相邻的两个数依次进行比较和调 ...
- [JavaEE] 20141228_Java类文章搜集
http://www.blogjava.net/jiangshachina 博客园java频道 Maven入门--概念与实例(原) Maven入门--较复杂的实例(原) Maven插件使用收集(原) ...
- php如何将网上的图片下载到本地
<?phpheader("Content-Type: application/force-download");header("Content-Dispositio ...
- SwiftUI 官方教程（六）
6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row ...