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. 通过refresh响应头，定时刷新或隔n秒跳转页面

    package day08; import java.io.IOException; import javax.servlet.ServletException; import javax.servl ...

  2. 如何从 vue-element-admin 迁移到 Fantastic-admin

    // FIXME 链接更新 如果你还不知道 Fantastic-admin 是什么,那么我先用几张预览图给大家了解一番. 看来预览图,如果你感兴趣,可以点这里来详细了解并试用,这是一款完成度极高,开箱 ...

  3. Spring Boot +Vue 项目实战笔记(三）：数据库的引入

    这一篇的主要内容是引入数据库并实现通过数据库验证用户名与密码. 一.引入数据库 之前说过数据库的采用是 MySQL,算是比较主流的选择,从性能和体量等方面都比较优秀,当然也有一些弊端,但数据库不是我们 ...

  4. 学习小计: Kaggle Learn Time Series Modeling

    ARIMA模型,参数含义参考:https://www.cnblogs.com/bradleon/p/6827109.html from statsmodels.tsa.arima_model impo ...

  5. idea控制台中文乱码解决办法

    也可以通过idea右下角的设置,但是properties文件是不能设置的,这个只能在file->setting->file encodings 设置

  6. JavaWeb使用Filter进行字符编码过滤 预防web服务中文乱码

    JavaWeb使用Filter进行字符编码过滤 预防web服务中文乱码 准备条件:一个创建好的 JavaWeb 项目 步骤: 1.创建一个类并实现 Filter 接口 import javax.ser ...

  7. 20210719 noip20

    考场 后两题是原题,教练说不用写了(ycx 不讲武德) T1 先手模了 \(n\le5\) 的情况,尝试找规律失败.那就只能 DP 了,最终没搞出来. 记忆化搜索打了 \(n\le20\) 的表,交了 ...

  8. Identity用户管理入门一（框架搭建）

    理论知识微软官方文档最完整,最详细,这里只一步步的介绍如何使用,地址:https://docs.microsoft.com/zh-cn/aspnet/core/security/authenticat ...

  9. clickonce的密钥到期问题处理

    最近clickonce的密钥到期了,在网上找了些文章用来修改密钥的到期时间,已成功生成新密钥,好不好使暂时未测. 在此小结一下,以备参考: 1.在原密钥所属电脑上cmd执行如下命令 renewcert ...

  10. 远程桌面无法复制粘贴 rdpclip.exe

    在一些意外情况下,远程桌面无法与桌面共享复制内容,这时候需要杀掉一个进程并重新启动 远程桌面复制之后,无法在本地桌面粘贴   在远程桌面中右键点击,选择启动任务管理器   找到一个进行rdpclip. ...