Vue implements user login switching

Vue implements user login switching

This article example shares the specific code of Vue to realize user login switching for your reference. The specific content is as follows

Switching has problems

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">User Account</label>
            <input type="text" id="username" placeholder="User account">
        </span>
        <span v-else>
            <label for="email">User mailbox</label>
            <input type="text" id="email" placeholder="User email">
        </span>
        <button @click="isUser = !isUser">Switch type</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isUser: true
            }
        })

    </script>
</body>
</html>

Effect display

Problems

  • If we switch the type while inputting content, we will find that the text still displays the previously input content.
  • But logically speaking, we should switch to another input element.
  • In the other input element, we did not enter any content.

Why does this problem occur?

This is because when Vue renders the DOM , for performance reasons, it will reuse existing elements as much as possible instead of creating new elements.
In the above case, Vue will find that the original input element is no longer used and is directly used as the input in else .

Solution

  • Add key to the corresponding input
  • Ensure that the key is different

Perfect version login example

Add different keys in input

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">User Account</label>
            <input type="text" id="username" placeholder="User account" key="username">
        </span>
        <span v-else>
            <label for="email">User mailbox</label>
            <input type="text" id="email" placeholder="User email" key="email">
        </span>
        <button @click="isUser = !isUser">Switch type</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isUser: true
            }
        })

    </script>
</body>
</html>

Effect display

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:
  • Vue implements the automatic login logout function for users who have not operated for a long time
  • Vue implements the switching function of user login mode
  • Django rest framework vue implements user login details
  • The Vue project uses localStorage+Vuex to save user login information
  • vue-router beforeEach jump route to verify user login status
  • Detailed explanation of how Vue obtains user login information through cookies
  • Use vue-router beforEach to implement the function of judging user login jump route filtering
  • Implementation of judging whether the user is logged in when vue routing jumps
  • Example code for saving user login status in Vue
  • Vue.js implements user comment, login, registration, and information modification functions

<<:  Detailed explanation of redundant and duplicate indexes in MySQL

>>:  Detailed explanation of the role of explain in MySQL

Recommend

What are the differences between xHTML and HTML tags?

All tags must be lowercase In XHTML, all tags must...

How to install MySQL 8.0 in Docker

Environment: MacOS_Cetalina_10.15.1, Mysql8.0.18,...

How many ports can a Linux server open at most?

Table of contents Port-related concepts: Relation...

Detailed description of shallow copy and deep copy in js

Table of contents 1. js memory 2. Assignment 3. S...

10 Things Excellent Web Developers Must Know to Improve Their Development Skills

"Development is more than just writing code&q...

CSS syntax for table borders

<br /> CSS syntax for table borders The spec...

Windows 10 is too difficult to use. How to customize your Ubuntu?

Author | Editor Awen | Produced by Tu Min | CSDN ...

Drop-down menu and sliding menu design examples

I found a lot of websites that use drop-down or sl...

How to solve the problem of MySQL query character set mismatch

Find the problem I recently encountered a problem...

Upgrade Docker version of MySQL 5.7 to MySQL 8.0.13, data migration

Table of contents 1. Back up the old MySQL5.7 dat...

The solution to the page not refreshing after the route changes after react jumps

Table of contents question Solution question Ther...

The docker-maven-plugin plugin cannot pull the corresponding jar package

When using the docker-maven-plugin plug-in, Maven...

Detailed explanation of how to view MySQL memory usage

Preface This article mainly introduces the releva...

Detailed steps to install Hadoop cluster under Linux

Table of contents 1. Create a Hadoop directory in...

vue uses Ele.me UI to imitate the filtering function of teambition

Table of contents Problem Description The general...