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

So verstehen Sie SELinux unter Linux

Inhaltsverzeichnis 1. Einführung in SELinux 2. Gr...

Vue + node realisiert Audioaufzeichnungs- und -wiedergabefunktion

Ergebnis: Der Hauptteil besteht darin, die Codelo...

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

Vor Kurzem hat das Projekt die Umgebung gewechsel...

Testfragen und Referenzantworten zum Thema Webdesign und Produktion

<br />Test zu Webdesign und -produktion, Tei...

Verwendung des Linux-Stat-Befehls

1. Befehlseinführung Der Befehl stat wird verwend...

Zusammenfassung von sieben in JavaScript implementierten Sortieralgorithmen (empfohlen!)

Inhaltsverzeichnis Vorwort Blasensortierung Grund...

Detaillierte Schritte und Methoden zur Problemlösung zur Installation von MySQL 8.0.19 unter Linux

Ich habe vor Kurzem einen Tencent-Cloud-Server ge...

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

Wenn Benutzer an einem Backend-Verwaltungssystem ...

Implementierung von HTTP- und HTTPS-Diensten mit Nginx-Reverse-Proxy für mehrere Domänennamen

Derzeit verfügt Nginx über einen Reverse-Proxy fü...

Vollständiger Code zur Implementierung des beliebten Astronauten-Zifferblatts basierend auf JavaScript

1. Effektanzeige Ein in JavaScript geschriebenes ...

Anmeldevorgang für das Python Flask WeChat-Applet und Implementierungscode der Anmelde-API

1. Schauen wir uns zunächst die Wirkung an Von de...

Wie wird eine SQL-Anweisung in MySQL ausgeführt?

Inhaltsverzeichnis 1. Analyse der MySQL-Architekt...

Wählen Sie die besten Voreinstellungen aus, um vollständige Kompatibilität mit allen Browsern zu erreichen.

Wir wissen, dass die Eigenschaften des Auswahltags...

Detaillierte Erklärung zur Verwendung von MySQL mysqldump

1. Einführung in mysqldump mysqldump ist ein logi...

Wie gut wissen Sie über die Vererbung in JavaScript?

Inhaltsverzeichnis Vorwort Die Beziehung zwischen...