用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的安装包安装到系统当中.我双击了安装包 ...
随机推荐
- Swift Review总结一：从 Swift Style 开始
最近凑了几个热心的小伙伴写一些Swift的新手demo(两周后应该能和大家见面了),我参与了review.于是借demo里的代码总结一下新手写Swift要注意的问题,尤其是从oc转到用swift写的开 ...
- Spring入门篇——第1章 概述
第1章 概述 本章对课程的情况进行介绍,并介绍框架和Spring概况. 1-1 Spring入门课程简介 1-2 Spring概况 1-3 Spring框架
- Java 扫描微信公众号二维码，关注并自动登录网站
https://blog.csdn.net/qq_42851002/article/details/81327770 场景:用户扫描微信公众号的二维码,关注后自动登录网站,若已关注则直接登录. 逻辑: ...
- osm2pgsql
osm2pgsql -d gis --create --slim --drop --flat-nodes '/data/nodes.bin' -G --hstore --tag-transform-s ...
- [codeforces792C][dp]
https://codeforc.es/contest/792/problem/C C. Divide by Three time limit per test 1 second memory lim ...
- Appium Inspector
点击放大镜,打开如下页面: 需要填写的信息如下: 获取以上信息,需执行aapt命令,查看app信息: 进入appt.exe所在路径,执行如下命令: 得到app的详细信息: 填写完如下信息后,保存: i ...
- Luogu P1092 虫食算 爆搜
心路历程:震惊,我竟然得了$90$分!!...康康数据...奥..(忽然有了邪恶的卡数据的想法) 于是把$for(int \space i=0;i<n;++i)$改成了$for(int \spa ...
- 「BZOJ 5010」「FJOI 2017」矩阵填数「状压DP」
题意 你有一个\(h\times w\)的棋盘,你需要在每个格子里填\([1, m]\)中的某个整数,且满足\(n\)个矩形限制:矩形的最大值为某定值.求方案数\(\bmod 10^9+7\) \(h ...
- jQuery系列（六）：jQuery的文档操作
1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...
- SpringMVC 请求映射注解
@GetMapping: 处理get请求,传统的RequestMapping来编写应该是@RequestMapping(value = “/get/{id}”, method = RequestMet ...