用key管理可复用元素
先看看不用key管理可复用元素的代码。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处，那就是在切换input时不会清楚里面的数据。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" >
</span>
<span v-else>
<label>Email</label>
<input placeholder="Enter your email address" >
</span>
<button v-on:click="test">切换</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
loginType: 'username'
},
methods:{
test:function(){
if(this.loginType != 'username'){
return this.loginType = 'username'
}
return this.loginType = 'email'
}
}
})
</script>
</html>
我么再看看使用key管理可复用元素。添加key属性，则这两个元素是相互独立，不再复用。这样当我们在切换input时里面的数据会被清除。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</span>
<span v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</span>
<button v-on:click="test">切换</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
loginType: 'username'
},
methods:{
test:function(){
if(this.loginType != 'username'){
return this.loginType = 'username'
}
return this.loginType = 'email'
}
}
})
</script>
</html>
用key管理可复用元素的更多相关文章
- ch6-条件渲染（v-if v-else v-else-if key管理可复用元素 v-show ）
1 v-if 1.1 简单使用 <h1 class="h1" v-if="ok">yes</h1> <script> var ...
- vue学习笔记一：用Key管理可复用元素
vue为了高效的渲染元素,会尽可能的复用组件,而不是从头渲染,如下案例 <template> <div id="app"> <template v-i ...
- vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
- Vue: 用 key 管理可复用的元素
<div id="login"> <template v-if="loginType === 'username'"> <labe ...
- Windows电脑多个SSH Key管理.md
笔者偏在阿里云,Github,开源中国上均存放一些私有项目代码,因此需要再Windows电脑上配置多个SSH Key 环境 操作系统:windows 7 Git 提示:Git 安装后就可以使用 Git ...
- 同一台电脑关于多个SSH KEY管理
运用shh -T -v git@github.com查看具体出错信息,再根据信息来调试 原文链接: http://yijiebuyi.com/blog/f18d38eb7cfee860c117d ...
- Git安装及SSH Key管理之Windows篇
一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Git版本:Git-2.11.0-64-bit.exe(64位) 二.Git安装 去官网下载完后一路下一步完成安装,如下图: ...
- vault key 管理工具
Vault is a tool for securely accessing secrets. A secret is anything that you want to tightly contro ...
- Git安装及SSH Key管理之Mac篇
1.下载git客户端,下载地址为:https://git-scm.com/download/mac 2.打开安装包,可以看到此时的界面为: 我们需要把.pkg的安装包安装到系统当中.我双击了安装包 ...
随机推荐
- PHP中RabbitMQ之amqp扩展实现（四）
目前我在PHP里接触实现RabbitMQ的方式有两种,一种是通过amqp扩展,一种是使用php-amqplib,本章讲诉RabbitMQ的安装及amqp扩展及amqp扩展如何实现RabbitMQ 环境 ...
- Django的请求生命周期与中间件中的5中方法
请求生命周期: 客户端——>WSGI——> 中间件——>路由匹配——>视图函数——>WSGI——>客户端 中间件: 在全局层明处理请求和响应的 form djang ...
- String类-StringBuffer类-StringBuilder类的比较
package LC20130929; /** * 字符串处理类: StringBuffer ~~ StringBuilder 〉〉 String 效果一样但是,性能却大不一样! ...
- sql 连接数查询
SELECT * FROM master.dbo.sysprocesses WHERE dbid IN ( SELECT dbid FROM master.dbo.sysdatabases WHERE ...
- Kotlin环境搭建---Hello World
对于亲爹都已经宣布它的重要性了,那做为搞安卓的自己有理由去拒绝它么?当然目前国内真正在商业中去采用Kotlin去开发项目的应该不多,但是!这肯定会被普及的,所以为了走在时代的前言,接下来会从基础语法开 ...
- 如何让Python2与Python3共存
一.摘要 最近做服务测试的时候,实在被第三方模块折磨的够呛,从安装就存在兼容Py2和Py3的问题,产品提供的服务越来越多,做服务验证也不得不跟进支持测试,这眼前的Hadoop/Hive/Hbase/H ...
- PHP把数组按指定的个数分隔
PHP把数组按指定的个数分隔 假设数组为array(‘1’,‘2’,‘3’,‘4’,‘5’,‘6’); 想把它分割成四个,那么结果为array(‘0’ => [‘1’,‘2’],‘1’ => ...
- 干货 | 以太坊Mist负责人教你建立无服务器应用
作者:Alex Van de Sande译者:王建/蔡佳慧译者介绍: 王建:万云平台区块链技术专家,拥有多年应用系统架构经验,目前在区块链落地方面进行积极探索 蔡佳慧:万云平台实习生,区块链技术爱好者 ...
- Filter和interceptor比较
作为一个备忘,有时间补充 https://www.cnblogs.com/learnhow/p/5694876.html 先说一个题外话,Filter是过滤器,interceptor是拦截器.前者基于 ...
- ACM-ICPC 2017 沈阳赛区现场赛 G. Infinite Fraction Path && HDU 6223（BFS）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6223 参考题解:https://blog.csdn.net/qq_40482495/article/d ...