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. iOS打印各种类型数据

    整型占位符说明 : %d : 十进制整数, 正数无符号, 负数有 “-” 符号; %o : 八进制无符号整数, 没有 0 前缀; %x : 十六进制无符号整数, 没有 0x 前缀; %u : 十进制无 ...

  2. 移动端rem布局屏幕适配插件（放js中便可使用）

    /* doc:不用管:document对象 win:不用管:window对象 design:注意:设计稿的尺寸/物理像素*/ (function (doc, win,design) {// alert ...

  3. springcloud核心组件Eureka、Ribbon、Feign、Hystrix、Zuul

    各个组件角色扮演:    Eureka:各个服务启动时,Eureka Client都会将服务注册到Eureka Server,并且Eureka Client还可以反过来从Eureka Server拉取 ...

  4. 学习HTML5 全局属性 accesskey-title

    属性classcontextmenu指定一个元素的上下文菜单.当用户右击该元素,出现上下文菜单dirdropzone指定是否将数据复制,移动,或链接,或删除idspellcheck检测元素是否拼写错误 ...

  5. Convolutional Neural Networks(2):Sparse Interactions, Receptive Field and Parameter Sharing

    Sparse Interactions, Receptive Field and Parameter Sharing是整个CNN深度网络的核心部分,我们用本文来具体分析其原理. 首先我们考虑Feedf ...

  6. jQuery DataTables 问题：Cannot reinitialise DataTable

    解决:  destroy: true, var tabel = $('#userlist').DataTable({        destroy: true,                    ...

  7. 20190820 On Java8 第十章 接口

    第十章 接口 接口和抽象类提供了一种将接口与实现分离的更加结构化的方法. 抽象类和方法 包含抽象方法的类叫做抽象类.如果一个类包含一个或多个抽象方法,那么类本身也必须限定为抽象的,否则,编译器会报错. ...

  8. PHP中的九大缓存技术

    1.全页面静态化缓存也就是将页面全部生成html静态页面,用户访问时直接访问的静态页面,而不会去走php服务器解析的流程.此种方式,在CMS系统中比较常见,比如dedecms: 一种比较常用的实现方式 ...

  9. JavaScript Is or isNot

    读书笔记,简化代码--不对外公布,只是做笔记使用. var superman = { name: "Superman", strength: "Super", ...

  10. CSS实现背景图片屏幕自适应

    在做登陆页面等的首页的时候,经常会遇到需要放一张背景大图的情况,并且需要图片按比例缩放,来适应不同屏幕的大小. html代码如下: <!DOCTYPE html> <html lan ...