v-for中的key的使用【key的作用主要是是为了高效的更新虚拟DOM】
<!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】的更多相关文章
- 图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法
其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...
- 虚拟dom？diff算法？key？Vue原理的核心三问？打包教你搞定。
为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...
- vue中的虚拟DOM树
什么是虚拟DOM树?(Virtual DOM) 虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的 01 当页面渲染的时候Vue会创建一颗虚拟DOM树 02 ...
- react中虚拟dom的diff算法
.state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- Map集合中get不存在的key值
返回的值是null 测试代码 import java.util.HashMap; import java.util.Map; public class Test { public static voi ...
- mysql中key 、primary key 、unique key 与index区别
一.key与primary key区别 CREATE TABLE wh_logrecord ( logrecord_id ) NOT NULL auto_increment, ) default NU ...
- 如何让OpenSSL得到JKS格式的keystore中的public and private key
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 高效率遍历Map以及在循环过程中移除 remove指定key
//高效率遍历Map以及在循环过程中移除 remove指定key //使用iter循环的时候 可以在循环中移除key,for在循环的过程中移除会报错哦 //本方法效率高 Iterator iter = ...
随机推荐
- oracle系统对象
select * from all_tab_comments-- 查询所有用户的表,视图等 select * from user_tab_comments -- 查询本用户的表,视图等 select ...
- 相同name,取最小的id的值，mysql根据相同字段 更新其它字段
id name info1 a 1232 a 2353 a 1244 b 125 b 987相同name,取最小的id的值id name info1 a 1232 a 1233 a 1234 b 12 ...
- Docker容器内部端口映射到外部宿主机端口
Docker允许通过外部访问容器或者容器之间互联的方式来提供网络服务.容器启动之后,容器中可以运行一些网络应用,通过-p或-P参数来指定端口映射. 注意:宿主机的一个端口只能映射到容器内部的某一个端口 ...
- This service allows sftp connections only
这是因为该用用户只开通了sftp,ssh被禁了 可以通过别的主机ssh登陆这台机器 app@home:/software>ssh mysftp@192.168.0.1 Authorized on ...
- Vagrant 官网文档翻译汇总
入门 Vagrant 入门 - 项目设置 Vagrant 入门 - box Vagrant 入门 - 启动 vagrant 及 通过 ssh 登录虚拟机 Vagrant 入门 - 同步目录(synce ...
- （转载）STL map与Boost unordered_map的比较
原链接:传送门 今天看到 boost::unordered_map,它与 stl::map的区别就是,stl::map是按照operator<比较判断元素是否相同,以及比较元素的大小,然后选择合 ...
- selenium python 报错“ unable to find binary in default location”
selenium python 报错如下: raise exception_class(message, screen, stacktrace)selenium.common.exceptions.W ...
- UI自动化通过文字、父子元素，兄弟元素定位
在百度首页,通过文字,父子元素,兄弟元素进行定位 一.文字定位: 通过界面上的文字进行定位,注意如果同一个页面上存在多个同样的文字的情况,返回的值会是多个,建议只存在一个情况下才用这方法. 如:定位百 ...
- HTML批量修改——正则表达式实践
目录 1.问题描述 2.初步研究 3.进一步研究 3.1提取2.*中的序号* 3.2提取标题 3.3选取全文 3.4替换 参考资料 1.问题描述 如下所示的一段HTML代码: ... <h2 a ...
- telnet访问出现telnet:Unable to connect to remote host: No route to host
Linux下的防火墙默认是不允许telnet服务通过的,所以,当防火墙不允许telnet服务通过时就会出现上面的这种情况,可以将防火墙关闭或者勾选允许telnet服务即可解决如上的问题.