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. Linux学习篇（二）-软件包管理器、Yum 软件仓库

    红帽软件包管理器 在红帽软件包管理器(rpm)公布之前,Linux 系统软件的安装只能采取"源码包"的方式安装,需要自行编译源码并解决许多依赖关系,所以软件的安装.升级.卸载的难度 ...

  2. 136、TensorFlow的Embedding lookup

    import tensorflow as tf; import numpy as np; c = np.random.random([10, 1]) b = tf.nn.embedding_looku ...

  3. python实现基于两张图片生成圆角图标效果的方法

    python实现基于两张图片生成圆角图标效果的方法 这篇文章主要介绍了python实现基于两张图片生成圆角图标效果的方法,实例分析了Python使用pil模块进行图片处理的技巧,分享给大家供大家参考. ...

  4. Repository模式--采用EF Fluent API使用EntityTypeConfiguration分文件配置Model映射关系

    EF中类EntityTypeConfiguration是一个很有用的类,在nopCommerence中就使用这个类来分文件分文件配置Model映射关系.今天我就来谈谈Repository模式在Enti ...

  5. HTML--JS 随机背景色

    <html> <head> <title>背景随机变色</title> <script type="text/javascript&qu ...

  6. MySQL 增删改语句

    # DML语言 /* 数据操作语言: 插入:insert 修改:update 删除: delete */ 一.插入语句 insert /* 语法: 方式一: insert into 表名(列名,..) ...

  7. Android 中三种启用线程的方法

    在多线程编程这块,我们经常要使用Handler(处理),Thread(线程)和Runnable这三个类,那么他们之间的关系你是否弄清楚了呢? 首先说明Android的CPU分配的最小单元是线程,Han ...

  8. 如何配置JedisPool的参数

    转自:http://blog.csdn.net/huahuagongzi99999/article/details/13631579 如何配置Pool的参数 JedisPool的配置参数很大程度上依赖 ...

  9. Scala函数高级操作

    字符串高级操作:***** 非常重要 将函数赋值给变量/值def sayHello(name:String): Unit = { println(s"Hello:$name")} ...

  10. mybatis 批量update报语法错误解决方法

    1.为什么会报语法错误 原因:在 *.xml文件内使用了循环,在mybatis中默认是不允许使用批量修改. <update id="setMaxMin" parameterT ...