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 = ...
随机推荐
- CSS3中哪些新属性—阴影、文本省略（1）
CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...
- Solidworks 2019 无法获得下列许可solidworks standard无效的(不一致的)使用许可号码(-8,544,0)
若出现如下述错误,只需将C:\***(C盘中生成注册表的文件夹)\Program Files\SOLIDWORKS Corp\SOLIDWORKS下的netapi32.dll文件复制到所安装路径中SO ...
- Mongodb php扩展及安装
Mongodb php扩展 Mongodb安装 1: 下载mongodb www.mongodb.org 下载最新的stable版 2: 解压文件 3: ...
- python web自动化测试框架搭建(功能&接口)——接口公共方法
接口公共方法有:数据引擎.http引擎.Excel引擎 1.数据引擎:获取用例.结果检查.结果统计 # -*- coding:utf-8 -*- from XlsEngine import XlsEn ...
- Java中的基本类型和包装类型区别
首先看一下几个测试题,验证一下java中对基本类型和包装类型的理解,看看最后输出的答案对不对,答案在这篇博客中哦: // 第一题: 基本类型和包装类型 int a = 100; Integer b = ...
- 跨平台自动构建工具v1.0.2 发布
XMake是一个跨平台自动构建工具,支持在各种主流平台上构建项目,类似cmake.automake.premake,但是更加的方便易用,工程描述语法更简洁直观,支持平台更多,并且集创建.配置.编译.打 ...
- 利用正则表达式模拟计算器进行字符串的计算实现eval()内置函数功能
代码感觉有点绕,刚开始学习python,相关知识点还没全部学习到,还请各位大神多多指教 import re # 定义乘法 def mul(string): mul1 = re.search('-?\d ...
- JavaScript List
function List() { this.listSize = 0; this.pos = 0; this.dataSource = []; this.clear = fu ...
- Ubuntu TTy字体
目的:修改tty终端下的字体大小,中文显示,字体美观问题 Linux版本:xubuntu14.04 当切换到tty终端模式式,中文乱码,且字体太小,影响阅读.在网上搜了一些资料,将问题及解决方案记录如 ...
- LeetCode #1021. Remove Outermost Parentheses 删除最外层的括号
https://leetcode-cn.com/problems/remove-outermost-parentheses/ Java Solution class Solution { public ...