Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
background
There are usually multiple login types on our login page, and we can switch between different login forms using conditional rendering.
practice
code
<! DOCTYPEhtml>
<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/[email protected]/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'>Click me to switch login mode</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>
Copy the codeEffect of the page
The original:
Click to switch login mode:
There is a problem
When you enter information in the username login page and switch to email, you will find that the input field is still there because both login types use the same element in the input field. Vue provides a solution by adding a key attribute to the input field.
Before the switch:
After the switch:
Optimized code
<! DOCTYPEhtml>
<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/[email protected]/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'>Click me to switch login mode</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>
Copy the codeEffect of the page
Before the switch:
After the switch:
You’ll notice that after you add the key, the input field has been cleaned up after you switch the login type.
That’s all for today, thank you for reading, and we’ll see you next time.