Vue implementiert die Benutzeranmeldungsumschaltung

Vue implementiert die Benutzeranmeldungsumschaltung

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung des Benutzeranmeldungswechsels zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Umstellung ist problematisch

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
    <div id="app">
        <span v-if="istBenutzer">
            <label for="username">Benutzerkonto</label>
            <input type="text" id="username" placeholder="Benutzerkonto">
        </span>
        <span v-else>
            <label for="email">Benutzerpostfach</label>
            <input type="text" id="email" placeholder="Benutzer-E-Mail">
        </span>
        <button @click="isUser = !isUser">Typ wechseln</button>
    </div>
    <script src="../js/vue.js"></script>
    <Skript>
        const app = new Vue({
            el: '#app',
            Daten: {
                isUser: true
            }
        })

    </Skript>
</body>
</html>

Effektanzeige

Probleme

  • Wenn wir während der Inhaltseingabe den Typ ändern, stellen wir fest, dass der Text immer noch den zuvor eingegebenen Inhalt anzeigt.
  • Logischerweise müssten wir aber auf ein anderes Eingabeelement umsteigen.
  • In das andere Eingabeelement haben wir keinen Inhalt eingetragen.

Warum tritt dieses Problem auf?

Dies liegt daran, dass Vue beim Rendern des DOM aus Leistungsgründen vorhandene Elemente so weit wie möglich wiederverwendet, anstatt neue Elemente zu erstellen.
Im obigen Fall stellt Vue fest, dass das ursprüngliche Eingabeelement nicht mehr verwendet wird und direkt als Eingabe in „else“ verwendet wird.

Lösung

  • Schlüssel zur entsprechenden Eingabe hinzufügen
  • Stellen Sie sicher, dass der Schlüssel unterschiedlich ist

Perfektes Versions-Login-Beispiel

Fügen Sie der Eingabe verschiedene Schlüssel hinzu

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
    <div id="app">
        <span v-if="istBenutzer">
            <label for="username">Benutzerkonto</label>
            <input type="text" id="username" placeholder="Benutzerkonto" key="username">
        </span>
        <span v-else>
            <label for="email">Benutzerpostfach</label>
            <input type="text" id="email" placeholder="Benutzer-E-Mail" key="email">
        </span>
        <button @click="isUser = !isUser">Typ wechseln</button>
    </div>
    <script src="../js/vue.js"></script>
    <Skript>
        const app = new Vue({
            el: '#app',
            Daten: {
                isUser: true
            }
        })

    </Skript>
</body>
</html>

Effektanzeige

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Vue implementiert die automatische Anmelde- und Abmeldefunktion für Benutzer, die längere Zeit nicht gearbeitet haben
  • Vue implementiert die Umschaltfunktion des Benutzeranmeldemodus
  • Django Rest Framework Vue implementiert Benutzeranmeldedetails
  • Das Vue-Projekt verwendet localStorage+Vuex, um Benutzeranmeldeinformationen zu speichern
  • vue-router beforeEach Sprungroute zur Überprüfung des Benutzeranmeldestatus
  • Detaillierte Erklärung, wie Vue über Cookies Benutzeranmeldeinformationen erhält
  • Verwenden Sie vue-router beforeEach, um die Funktion zur Beurteilung der Benutzeranmeldungs-Sprungroutenfilterung zu implementieren
  • Implementierung der Beurteilung, ob der Benutzer beim Vue-Routing-Sprung angemeldet ist
  • Beispielcode zum Speichern des Benutzeranmeldestatus in Vue
  • Vue.js implementiert Funktionen für Benutzerkommentare, Anmeldungen, Registrierungen und Informationsänderungen

<<:  Lösung für das Problem, dass die virtuelle Virtualbox-Maschine im NAT-Modus keine Verbindung zum externen Netzwerk herstellen kann

>>:  Detaillierte Erklärung der Rolle von Explain in MySQL

Artikel empfehlen

Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen

Das Internet ist bereits voll von Artikeln dieser...

So fragen Sie die Schnittmenge von Zeiträumen in MySQL ab

Mysql-Abfragezeitraum-Schnittmenge Anwendungsszen...

Details zur Verwendung der JS-Tag-Syntax

Inhaltsverzeichnis 1. Einführung in Label-Anweisu...

Eine Sammlung von Informationen zu Formularen und Formularübermittlungsvorgängen in HTML

Hier stellen wir das Wissen über Formularelemente...

Detaillierte Schritte zum Erstellen der TypeScript-Umgebung und Bereitstellen in VSCode

Inhaltsverzeichnis TypeScript-Umgebungskonstrukti...

So handhaben Sie Bilder in Vue-Formularen

Frage: Ich habe in Vue ein Formular zum Hochladen...

Häufige Probleme bei der Implementierung der Fortschrittsbalkenfunktion von vue Nprogress

NProgress ist der Fortschrittsbalken, der oben im...

MySQL häufig verwendete SQL und Befehle vom Eintrag bis zum Löschen der Datenbank und zum Weglaufen

Inhaltsverzeichnis Starten und Stoppen Datenbankb...

So verwenden Sie js, um festzustellen, ob eine Datei UTF-8-codiert ist

Konventionelle Lösung Verwenden Sie FileReader, u...

So erstellen Sie SonarQube mit Docker

Inhaltsverzeichnis 1. Docker installieren 2. Sona...

Verwenden von js zum Implementieren eines Zahlenratespiels

Letzte Woche gab mir der Lehrer eine kleine Hausa...

Überlegungen zur Partitionierung von MySQL-Datenbanktabellen [empfohlen]

Die Tabellenpartitionierung unterscheidet sich vo...

VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren

Willkommen zur vorherigen Canvas-Spielserie: 《VUE...

Implementierungscode der Funktion zur Benutzervorschauzeitüberwachung der Vue-Seite

In einem aktuellen Unternehmen besteht die Anford...

Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...