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 = ...
随机推荐
- Facebook发布Tweaks：让微调iOS应用变得更简单
假设,你正在开发一款iOS应用. 你的iOS应用有很多动画效果,而你(或你的设计师)希望让那些动画效果的持续时间恰到好处.那华丽的抽屉特效是应该耗时半秒钟,还是四分之三秒呢? 通常情况下,开发者会对合 ...
- 初学Cadence 一
点击打开 Design Entry CIS 弹出 不要选 OrCAD Capture,这个组件和OrCAD Capture CIS 相比少了很多东西,对元件的管理不方便.选 OrCAD Capture ...
- Memecached 服务器安装（一）
Memecached 服务器安装(一) 前提:首先您的php环境已经安装完成,如若没有则参考 http://www.cnblogs.com/xulele/p/5264781.html 安装环境链接:h ...
- CodeIgniter 技巧 - 通过 Composer 安装 CodeIgniter 框架并安装依赖包
PHP 项目中,通过 Composer 来管理各种依赖包,类似 Java 中的 Maven,或 Node 中的 npm.CodeIgniter 框架要想通过 Composer 自动加载包也很简单,步骤 ...
- git报错-Initial commit Untracked files nothing added to commit but untracked ……
文章转自 https://www.jianshu.com/p/61c3db30d488 在目标执行命令 git stratus 报错 根据上面的文章,可以解决问题.不行的话,请留言. 感谢你的阅读
- 安装loadrunner11的时候提示'命令行选项语法错误。键入命令 / ?’ 怎么办
重启电脑后再安装.若还是不行就运行安装程序自带的vcredist_x86.exe,在我电脑的安装包的目录是loadrunner-11\lrunner\Kor\prerequisites\vc2005_ ...
- vue.js2.0 (简易)水果商城 vuex vant-ui
vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...
- python学习第九天数据类型列表创建，查找操作方法
数据类型中列表是整个python最常用的数据类型,列表最常用的方法就是创建,增删改查,切片,循环以及排序等系列操作,任何操作都离不开增删改查操作,这样很容记住操作方法 1,列表的创建 list=[] ...
- 关于Echarts的使用和遇到的问题
对于插件工具,感觉按着官方的教程,便可以使用,但是看这个Echarts有点晕乎乎的,还是不能快速的学习啊. 一.在webpack中使用ECharts //通过 npm 获取 echartsnpm in ...
- MVC模型的基本原理及实现原理
[转载]MVC架构在Asp.net中的应用和实现 摘要:本文主要论述了MVC架构的原理.优缺点以及MVC所能为Web应用带来的好处.并以“成都市信息化资产管理系统”框架设计为例,详细介绍其在Asp.n ...