用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的安装包安装到系统当中.我双击了安装包 ...
随机推荐
- 转载-对于Python中@property的理解和使用
原文链接:https://blog.csdn.net/u013205877/article/details/77804137 重看狗书,看到对User表定义的时候有下面两行 @property def ...
- 怎么解决Win7电脑更新出现80072EE2代码的错误？
我们在使用Win7系统时经常会遇到更新,这些更新可以修复一些系统漏洞,提高系统的安全性.但有时我们在进行相关更新时会出现错误,而导致最后的更新失败.下面好系统重装助手就和大家分享一下Win7系统更新出 ...
- webstorm 注册服务器
之前都是使用2017.2.27的方法,版本是2017.1.1,还没提示过期,但是根据评论说这个链接已经失效了,评论也给出了个新地址:http://idea.iteblog.com/key.php
- C# List集合去除重复数据
实例如下: using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; ...
- okhttp拦截器之CacheInterceptor解析
在上一次[https://www.cnblogs.com/webor2006/p/9150658.html]了解了缓存的存与取的细节之后,接下来就可以分析一下OkHttp的缓存拦截器啦: OkHttp ...
- Python3下UnicodeDecodeError：‘ASCII’ codec cant decode..(128)
今天准备用Keras跑一下LeNet的程序,结果总是编码出错 源代码是2.7写的,编码格式是utf-8.然后尝试网上各种方法不适用,最后还是解决了 源代码: data = gzip.open(r'C: ...
- unreal 抓mobile 管线
把renderdoc挂到生成的exe上 用命令行 “路径\xx.uproject” scenename -game -FeatureLevelES31 -windowed -resx=1920 -re ...
- 数字签名 转载：http://www.youdzone.com/signature.html
What is a Digital Signature?An introduction to Digital Signatures, by David Youd Bob (Bob's public k ...
- PHP常见设计模式
简单工厂 <?php # 简单工厂 abstract class mycoach { public function __construct(){} } class cultivatecpc e ...
- 使用EntityFramework6连接MySql数据库-db first方式
准备工具: VS2013.MySQL For VisualStudio 1.1.4.Connector/Net 6.8.3 程序包管理器执行命令: Install-Package EntityFram ...