vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM；
没有绑定key是这样的：
绑定了key的效果：
源码：
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

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

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script src="lodash.min.js"></script>

     <style>

         .userList{

             border: 1px solid seagreen;

             padding: 10px 20px;

             margin: 10px 0;

         }

     </style>

 </head>

 <body>

     <div id="app">

     </div>

     <template id="my-com">

         <div class="userList"  :id="obj.id" >

             <h4>武将:{{obj.name}}</h4>

             <p>简介:{{obj.content}}</p>

             <div class="input-group">

                 <input type="text" class="form-control" placeholder="来将可留姓名" >

             </div>

         </div>

     </template>

     <script type="text/javascript">

         Vue.component('my-com',{

             template:'#my-com',

             props:{//传值

                 obj:Object

             }

         })

         var App = {

             data(){

                 return {

                     datas:[

                         {id:1,name:'吕布',content:'我是吕布'},

                         {id:2,name:'赵云',content:'我是赵云'},

                         {id:3,name:'典韦',content:'我是典韦'},

                         {id:4,name:'关羽',content:'我是关羽'},

                         {id:5,name:'马超',content:'我是马超'},

                         {id:6,name:'张飞',content:'我是张飞'},

                     ]

                 }

             },

             template:'<div class="container"><h4>key的作用主要是是为了高效的更新虚拟DOM</h4><button @click="change" class="btn btn-success">改变顺序</button><my-com v-for="(item,index) in datas" :obj="item" :key="item.id"></my-com></div>',

             methods: {

                 change(){

                     this.datas = _.shuffle(this.datas);

                 }

             },

         }

         new Vue({

             el:'#app',

             components:{

                 App

             },

             template:'<App></App>'

         })

     </script>

 </body>

 </html>

 <!--

    如果for循环时不给 不给每个元素 添加key，点击打乱顺序时，会出现 元素与内容对应不上的

    添加key，就不会出现打乱节点的情况

 -->

v-for中的key的使用【key的作用主要是是为了高效的更新虚拟DOM】的更多相关文章

  1. 图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  2. 虚拟dom？diff算法？key？Vue原理的核心三问？打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...

  3. vue中的虚拟DOM树

    什么是虚拟DOM树?(Virtual DOM)   虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的    01    当页面渲染的时候Vue会创建一颗虚拟DOM树 02    ...

  4. react中虚拟dom的diff算法

    .state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...

  5. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  6. Map集合中get不存在的key值

    返回的值是null 测试代码 import java.util.HashMap; import java.util.Map; public class Test { public static voi ...

  7. mysql中key 、primary key 、unique key 与index区别

    一.key与primary key区别 CREATE TABLE wh_logrecord ( logrecord_id ) NOT NULL auto_increment, ) default NU ...

  8. 如何让OpenSSL得到JKS格式的keystore中的public and private key

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  9. 高效率遍历Map以及在循环过程中移除 remove指定key

    //高效率遍历Map以及在循环过程中移除 remove指定key //使用iter循环的时候 可以在循环中移除key,for在循环的过程中移除会报错哦 //本方法效率高 Iterator iter = ...

随机推荐

  1. onLayout初始化裁剪信息

    在EasyConstraintLayout中初始化LayoutParamsData的paths @Override protected void onLayout(boolean changed, i ...

  2. 屏幕分辨率测试工具（舍弃）---chrome开发者工具devTools(强烈建议系统学习)

    2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  3. php基础/类型

    1.php的格式: <?php ?> 内嵌格式: <? ?> (php可以写在html文件里面) 2.php的输出:echo (每段的结束必须加;) 3.定义变量: 不需要管他 ...

  4. Python变量和字符串详解

    Python变量和字符串详解 几个月前,我开始学习个人形象管理,从发型.妆容.服饰到仪表仪态,都开始做全新改造,在塑造个人风格时,最基础的是先了解自己属于哪种风格,然后找到参考对象去模仿,可以是自己欣 ...

  5. 第 4 章 前端基础之jquery

    一.jQuery是什么? 1. jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. 2. jQuery是继prototype之后又一 ...

  6. 关于Nuget包安装之后再卸载，找不到dll的问题

    场景: 在nuget上安装了FFTW.NET,自动的安装一堆其依赖的dll,那些dll都是donet自带的.再卸载这些dll的时候,项目可以生成成功,就是跑不起来.提示如下: 解决方案: 经过排查发现 ...

  7. Collections -集合排序compareTo方法重写，shuffle，addall

    package cn.learn.collection.Collections; /* 排序的对象的类,实现comparable借口,重写compareto方法 若要打印必须重写toString方法, ...

  8. 《JAVA设计模式》之模板模式(Template)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  9. IDEA 中常用插件

    怎么找到安装插件位置 Mybatis plugin 可以在mapper接口中和mapper的xml文件中来回跳转,就想接口跳到实现类那样简单. Lombok plugin 开发神器,可以简化你的实体类 ...

  10. 【五一qbxt】day6 OI中的stl

    from:why 很多很多part…… 1.pair: 相当于把两个变量放在一起: #include<utility> using namespace std; pair<TypeN ...