用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的安装包安装到系统当中.我双击了安装包 ...
随机推荐
- SiteOmat
卡巴斯基实验室高级安全研究员Ido Naor和以色列安全研究员Amihai Neiderman在卡巴斯位于墨西哥坎昆举行的安全分析师峰会期间,就加油站的安全问题展开了全面分析.他们的研究表明,攻击者可 ...
- Matlab[linux]安装问题
OS : Arch Linux 桌面:Gnome X11 软件是从网上下载的iso文件,对文件挂载或者使用解压软件解压,我个人更喜欢挂载,解压有点麻烦(我比较懒) 软件:matlab(R2016) 开 ...
- Pycharm中查看内置函数的源码
方法1.鼠标放在函数上,Ctrl+B,看源码 方法2.将光标移动至要查看的方法处,按住ctrl 键,点击鼠标左键,即可查看该方法的源码.
- JavaScript 基础知识梳理——事件
事件 1)事件是文档或浏览器窗口中发生的特定的交互瞬间. JavaScript和HTML之间的交互是通过事件实现的. 2)事件流——描述的是从页面中接受事件的顺序 IE——事件冒泡流 Netscape ...
- DTcmsV4.0分析学习——(3)URL重写
3.URL重写 3.1 控制流程 通过IHttpModule控制所有页面请求,具体流程如下 (1)真实路径可正常访问 (2)前台页面通过URL重写映射aspx目录,后台页面通过URL重写映射admin ...
- 如何低成本搭建dnslog服务器
DNSLog,简单来说,就是通过记录对于域名的DNS请求,通过dns请求这个相对"隐蔽"的渠道,来委婉地获取到想要获得的信息. 例如,在一个针对mysql数据库的注入中,如果没有回 ...
- frontEnd（前端基础）
第一章:前端概述 第二章:前端三剑客 第三章:第一个页面 第四章:html常用标签 第五章:标签分类 第六章:css三种引入方式 第七章:样式与长度颜色 第八章:常用样式 第九章:CSS选择器 第十章 ...
- Win10 + CLion + 树莓派 + QT 远程开发调用Python
原则:能在一个机器上开发的就不在两台机器上!! 首先需要配置远程QT开发环境 配置Cmake cmake_minimum_required(VERSION 3.14) project(qt_test) ...
- Django-缓存问题无法创建表
新启的项目,应用不叫app01,也没有userinfo表: 由于缓存原因不能model里创建表报错: 解决办法: 删除init外的所有文件
- BZOJ 4898 Luogu P3778 [APIO2017]商旅 (分数规划、最短路)
题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=4898 (luogu)https://www.luogu.org/probl ...