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