Vue implements login type switching
|
This article example shares the specific code of Vue to implement login type switching for your reference. The specific content is as follows Operation effect
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login type switch</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="userAccount">User Account:</label>
<input type="text" id="userAccount" placeholder="Please enter your account" key="userAccount">
</span>
<span v-else>
<label for="userEmail">User Email:</label>
<input type="text" id="userEmail" placeholder="Please enter your email address" key="userEmail">
</span>
<button @click="changeType">Switch type</button>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
},
methods:{
changeType(){
return this.isUser = !this.isUser
}
}
})
</script>
</html>Code snippet analysis
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Explanation of the process of docker packaging node project
Recommend
The solution to the problem that the web table or div layer is stretched in the web page
<br />When we design web pages, we always en...
Simply learn various SQL joins
The SQL JOIN clause is used to join rows from two...
Vue realizes simple effect of running light
This article shares the specific code of Vue to a...
MySQL 8.0.17 installation and configuration method graphic tutorial
This article shares the installation and configur...
From CSS 3D to spatial coordinate axis with source code
One time we talked about the dice rolling game. A...
Tips for writing concise React components
Table of contents Avoid using the spread operator...
MySQL table return causes index invalidation case explanation
Introduction When the MySQL InnoDB engine queries...
Vue realizes the function of uploading photos on PC
This article example shares the specific code of ...
Div can input content without using input as an input box to block the automatic input style
Today I designed a dynamic window style for publis...
Complete the search function in the html page
Recently I've been working on a framework tha...
Analysis of the process of configuring a simple network environment based on Tcl language
1. Tcl script file circle.tcl code comments #Set ...
Detailed explanation of angular content projection
Table of contents Single content projection Multi...
IE8 Developer Tools Menu Explanation
<br />This article has briefly explained the...
Linux system opens ports 3306, 8080, etc. to the outside world, detailed explanation of firewall settings
Many times, after we install a web service applic...
Detailed tutorial for downloading, installing and configuring MySQL 5.7.27
Table of contents 1. Download steps 2. Configure ...