v-for 指令基于一个数组来渲染一个列表，如下

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5   <meta charset="UTF-8">

 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7   <title>Document</title>

 8 </head>

 9

10 <body>

11   <div id="app">

12

13     <div>

14       <input type="text" v-model="name">

15       <button @click="addNewUser">添加</button>

16     </div>

17

18     <ul>

19       <li v-for="(user, index) in userlist">

20         <input type="checkbox" />

21         姓名：{{user.name}}

22       </li>

23     </ul>

24   </div>

25

26   <script src="./lib/vue-2.6.12.js"></script>

27   <script>

28     const vm = new Vue({

29       el: '#app',

30       data: {

31         // 用户列表

32         userlist: [

33           { id: 1, name: 'zs' },

34           { id: 2, name: 'ls' }

35         ],

36         // 输入的用户名

37         name: '',

38         // 下一个可用的 id 值

39         nextId: 3

40       },

41       methods: {

42         // 点击了添加按钮

43         addNewUser() {

44           this.userlist.unshift({ id: this.nextId, name: this.name })

45           this.name = ''

46           this.nextId++

47         }

48       },

49     })

50   </script>

51 </body>

52

53 </html>

可以通过v-for将data中的 userlist 循环渲染到 li 中，注意第 19 行，没有使用key

可以看到，不添加key的情况下，勾选一个值后再向其中添加一个值，会造成勾选值的改变，从开始勾选的"ls"变为"zs"

在向v-for中添加key值id后

<li v-for="(user, index) in userlist" :key="user.id">

在使用key后，可以看到勾选值不会再因为新添加值而产生改变

在Vue官方文档中，对于key值的介绍是

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

可以这样理解：vue是通过这个 key 值，使其分辨所有节点的身份，根据key值(id)跟踪找到精确的元素重新排序。

举个例子就是说：老师(Vue)在找一个学生的时候是通过具有唯一性的 学号(key) 来找到具体的学生，一个学号对应一个学生，不会出现上面勾选值错误的情况

在官方api中对key的解释是：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

key值在2.4.2版本之前，只能是 字符串或者数字 类型。由于key的唯一性，尽量把id作为key值。index索引的话因为并不具有唯一性，不能作为key值

v-for为什么最好(一定)要加key的更多相关文章

  1. iview table里面 插入下拉列表组件（自定义组件）一定要加key，不加key，table开始会加载所有数据，然后再从第2页点回第一页，就会走onChange事件，混乱的逻辑，切记加：key

    iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key 关 ...

  2. v-for为什么要加key，能用index作为key么

    前言 在vue中使用v-for时,一直有几个疑问: v-for为什么要加key 为什么有时候用index作为key会出错 带着这个疑问,结合各种博客和源码,终于有了点眉目. virtual dom 要 ...

  3. 详解 Diff 算法以及循环要加 key 值问题

    上一篇文章我简述了什么是 Virtual DOM,这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值. 什么是 DOM Diff 算法 Web 界面其实就是 ...

  4. ssh-agent自启动加key脚本

    公司使用到阿里云. 需要使用 ssh-agent forward 来跳转.为了方便自己就写了这个脚本 1 #!/bin/sh 2 # auto start ssh-agent and add key ...

  5. elementui raido 单选框 循环渲染加:key

    <el-radio-group v-model="adminRole"> <el-radio v-for="item in adminRoles&quo ...

  6. Xxtea加解密

    转自:http://www.cnblogs.com/luminji/p/3406407.html 很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码, ...

  7. C#和Javascript间互转的Xxtea加解密

    很有意思的一件事情,当我想要找 Xxtea 加解密算法的时候,发现了前同事(likui318)的代码,不妨分享出来.此代码满足: 1:Xxtea支持中文: 2:支持 JS 和 C# 加解密之间的互转: ...

  8. 一起写一个Android图片加载框架

    本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...

  9. android 图片加载优化，避免oom问题产生

    1,及时回收bitmap,在activity的onstop()和onDestory()里面调用如下代码进行bitmap的回收: // 先判断是否已经回收 if(bitmap != null & ...

随机推荐

  1. Git修改历史commit的author信息

    前言 "嘀嗒嘀嗒",抬头看向墙上的钟表,此时已是凌晨1点.小明终于把Go语言圣经第二章的笔记写完,保存commit,提交,然后睡觉. 额,等等,不对,小明发现他用的是公司的git账 ...

  2. Vulnhub靶机渗透 -- DC5

    信息收集 通过nmap搜索到IP为:192.168.200.11 开启了80http.111RPC服务端口 先打开网页,然后进行目录爆破 contact.php 攻击 经搜索没有发现可以攻击wheel ...

  3. MutationObserver API

    1.概述 MutationObserver接口提供了监视对DOM树所做更改的能力.它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分. 但是,它与Mu ...

  4. uni-app 小程序从零开始的开发流程

    前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni- ...

  5. 集合框架2- ArrayList

    其实 Java 集合框架也叫做容器,主要由两大接口派生而来,一个是 collection,主要存放对象的集合.另外一个是Map, 存储着键值对(两个对象)的映射表. 下面就来说说 List接口,Lis ...

  6. xxs攻击

    1 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端脚本.攻击者利用XSS漏洞旁路掉访问控制--例如 ...

  7. 机械硬盘换到SSD后系统引导报错代码0xc000000e

    由于机械硬盘IO不够用,系统使用起来非常的缓慢,特意购买了新的SSD进行了替换.机械硬盘的IO在70左右,SSD的IO在1000-4000左右指普通消费SSD. 由于不想安装系统,就直接把机械硬盘的数 ...

  8. 发那科FANUC机器人视频学习教程

    82课时的全套发那科机器人视频教程,学完可以掌握发那科机械手的使用和编程,需要的加我微信私私聊.X241602 FANUC 是日本一家专门研究数控系统的公司,成立于1956年.是世界上最大的专业数控系 ...

  9. 性能测试必备命令（2）- uptime

    性能测试必备的 Linux 命令系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1819490.html 介绍 系统启动up了(运行了)多 ...

  10. web服务器之Ser-U和NFS

    1. Ser-U加载页面目录/文件列表 2. Ser-U下载文件 3. NFS服务器加载目录/文件列表 4. NFS服务器下载文件 4. 对比分析 Ser-U服务器在传输服务器端的目录时,使用的为xm ...