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

CSS screen size adaptive implementation example

To achieve CSS screen size adaptation, we must fi...

MySQL max_allowed_packet setting

max_allowed_packet is a parameter in MySQL that i...

MySQL creates users, authorizes users, revokes user permissions, changes user passwords, and deletes users (practical tips)

MySQL creates users and authorizes and revokes us...

Example code for css flex layout with automatic line wrapping

To create a flex container, simply add a display:...

Summary of clipboard.js usage

Table of contents (1) Introduction: (2) The ways ...

JavaScript implements simple date effects

The specific code of JavaScript date effects is f...

Detailed explanation of using javascript to handle common events

Table of contents 1. Form events 2. Mouse events ...

Deeply understand the reason behind the prompt "No such file or directory" when executing a file in Linux

1 Background Recently, I have been studying how t...

WeChat applet calculator example

This article shares the specific code of the WeCh...

The 6 Most Effective Ways to Write HTML and CSS

This article shares the 6 most effective methods,...

Practice of el-cascader cascade selector in elementui

Table of contents 1. Effect 2. Main code 1. Effec...

Solve the problem that element edit form el-radio cannot be selected after echoing

Table of contents Preface question Online solutio...

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

In the horizontal direction, you can set the cell...

MySQL in Windows net start mysql Start MySQL service error occurs System error solution

Table of contents 1- Error details 2-Single Solut...

Practical example of nested routes in vue.js Router

Table of contents Preface Setting up with Vue CLI...