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 = ...
随机推荐
- vue获取v-on绑定事件的触发对象
<span @click="fn" id="foo">xxx</span> fn(e){ console.log(e);//展开查看e. ...
- 用maven给SpringBoot项目打包
注意要点: 1.注意某个moule有依赖需要在对应的pom.xml里填写有关的信息,如: <dependencies> <dependency> <artifactId& ...
- vue项目运行时出现的问题（less、vue poackages version）
今天运行项目,项目一直好好的却突然运行时报错,如下: 是引入文件报错问题,回头查看了一下文件在main.js的引入: import '@/assets/styles/custom.less'; 文件引 ...
- Nginx 模块 - ngx_core_module
原文地址 示例配置 指令 accept_mutex accept_mutex_delay daemon debug_connection debug_points env error_log even ...
- 使用 Vagrant 搭建 Kubernetes 本地测试环境
Vagrant 中文资料 参考资料 Kubernetes 需要一个至少包含三个节点的分布式系统.如果想学习 Kubernetes,或只是在本地搭建测试环境,则可以通过 Vagrant 来简单的实现. ...
- hbase报Dead Region Servers
问题描述: 16010端口启动成功,16020未启动. hbase-root-regionserver-hbase2.log日志: 2019-08-14 16:45:10,552 WARN [Thre ...
- poj1742Coins（多重背包）
People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar.One day Tony ...
- 前后端分离 token和cookie对比
HTTP协议本身是无状态的,所以需要一个标志来对用户身份进行验证 1.cookie 用户登录成功后,会在服务器存一个session,同时发送给客户端一个cookie,这个cookie里面有唯一标识该用 ...
- oracle三大范式
范式: 设计数据库定义的一个规则, 三大范式, 灵活运用, 人的思想是活的 一范式 1, 不存在冗余数据 同一个表中的记录不能有重复----所以主键(必须有) 2, 每个字段必须是不可再分的信息(列不 ...
- Netty之揭开BootStrap 的神秘面纱
客户端BootStrap: Bootstrap 是Netty 提供的一个便利的工厂类, 我们可以通过它来完成Netty 的客户端或服务器端的Netty 初始化.下面我先来看一个例子, 从客户端和服务器 ...