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
Manually install mysql5.7.10 on Ubuntu
This tutorial shares the process of manually inst...
Is a design that complies with design specifications a good design?
In the past few years of my career, I have writte...
How to find websites with SQL injection (must read)
Method 1: Use Google advanced search, for example...
How to use skeleton screen in vue project
Nowadays, application development is basically se...
Analysis and description of network configuration files under Ubuntu system
I encountered a strange network problem today. I ...
Detailed steps for deploying Tomcat server based on IDEA
Table of contents Introduction Step 1 Step 2: Cre...
td content automatically wraps table table td after setting the width too much text automatically wraps
Set the table's style="table-layout:fixed...
JavaScript to achieve all or reverse selection function
This article shares the specific code of JavaScri...
How to center your HTML button
How to center your HTML button itself? This is ea...
Analysis of the Docker image construction principle (you can build an image without installing Docker)
Building an image is a very important process in ...
Linux command line operation Baidu cloud upload and download files
Table of contents 0. Background 1. Installation 2...
Detailed explanation of Zabbix installation and deployment practices
Preface Zabbix is one of the most mainstream op...
Analysis and solution of MySQL connection throwing Authentication Failed error
[Problem description] On the application side, th...
MySQL storage engine basics
In the previous article, we talked about MySQL tr...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...