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
Detailed explanation of the problem of failure to synchronize warehouse cache after changing yum source in CentOS8
Cause of the problem: At first, the default yum s...
React-Native environment setup and basic introduction
Environment Preparation 1. Environment Constructi...
After Apache is installed, the service cannot be started (error code 1 appears when starting the service)
Table of contents 1. Error message 2. Cause of er...
Datagrip2020 fails to download MySQL driver
If you cannot download it by clicking downloadlao...
Elegant practical record of introducing iconfont icon library into vue
Table of contents Preface Generate SVG Introducti...
The leftmost matching principle of MySQL database index
Table of contents 1. Joint index description 2. C...
Play and save WeChat public account recording files (convert amr files to mp3)
Table of contents Audio transcoding tools princip...
el-table in vue realizes automatic ceiling effect (supports fixed)
Table of contents Preface Implementation ideas Ef...
CSS3 to achieve floating cloud animation
Operation effect html <head> <meta chars...
Tutorial on installing MySQL 5.7.18 decompressed version on Windows
1. Installation process MySQL version: 5.7.18 1. ...
Advantages of MySQL covering indexes
A common suggestion is to create indexes for WHER...
How to delete a MySQL table
It is very easy to delete a table in MySQL, but y...
How to use less in WeChat applet (optimal method)
Preface I am used to writing less/sass, but now I...
Detailed explanation of the process of Zabbix active, passive and web monitoring in distributed monitoring system
In the previous article, we learned about the net...
Solve the error "Can't locate ExtUtils/MakeMaker.pm in @INC"
When installing mha4mysql, the steps are roughly:...