背景
通常在我们的登录页面会有多种登录类型，我们可以通过条件渲染来切换不同的登录表单。
实践
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<template v-if="loginType=='username'">
<label for="#user">username: </label> <input type="text" id="user">
</template>
<template v-else="loginType=='email'">
<label for="#email">email: </label> <input type="email" id="email">
</template>
<br><br>
<button @click='change'>点我切换登录方式</button>
</div>
<script>
app = new Vue({
el: "#app",
data: {
loginType: "username"
},
methods: {
change: function(){
if(this.loginType=="username"){
this.loginType="email";
}else{
this.loginType="username";
}
}
}
})
</script>
</body>
</html>
页面效果
初始：
点击切换登录方式：
存在问题
当我们在 username 登录页面输入了信息后，再切换到 email，你会发现输入框中的内容还在，这是因为两种登录类型使用的输入框是同一个元素。Vue 为我们提供了解决方案，即给输入框加上 key 属性即可。
切换前：
切换后：
优化后的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<template v-if="loginType=='username'">
<label for="#user">username: </label> <input type="text" id="user" key="username-input">
</template>
<template v-else="loginType=='email'">
<label for="#email">email: </label> <input type="email" id="email" key="email-input">
</template>
<br><br>
<button @click='change'>点我切换登录方式</button>
</div>
<script>
app = new Vue({
el: "#app",
data: {
loginType: "username"
},
methods: {
change: function(){
if(this.loginType=="username"){
this.loginType="email";
}else{
this.loginType="username";
}
}
}
})
</script>
</body>
</html>
页面效果
切换前：
切换后：
你会发现，加了
key之后，在切换登录类型后，输入框中的内容已经被清理掉了。
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
