用key管理可复用元素
2024-09-08 11:48:30
先看看不用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>
最新文章
- 把url参数转化成一个对象返回
- jquery文字溢出处理，超出变省略号
- ThinkPHP3.2.2中开启REWRITE模式
- Swift中的问号?和感叹号!
- DataGridView显示行号的几种方法来自http://www.soaspx.com/dotnet/csharp/csharp_20100204_2740.html
- 分享一个Web弹框类
- 深入了解Angularjs指令中的ngModel
- winform 解决界面闪动、提升加载速度 分类： WinForm 2015-02-03 16:34 161人阅读 评论(0) 收藏
- vue路由跳转时判断用户是否登录功能
- 微信小程序用setData修改数组或对象中的一个属性值
- softmax分类算法原理(用python实现)
- Centos上安装jdk版本出错的问题
- readme 语法
- jmeter中测试接口
- 读书笔记 C# Lookup<TKey,TElement>和ToLookup方法的浅析
- Dbshop v1.3任意用户密码重置漏洞
- Struts2：<s:action>的使用
- eslint常规语法检
- TIMER_PWM_CAPTURE
- POJ 3660 Cow Contest （dfs）