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

Detaillierte Erläuterung des Falls, in dem eine untergeordnete Vue-Komponente die Methode der übergeordneten Komponente aufruft

1. Rufen Sie die Methode der übergeordneten Kompo...

Detaillierte Erklärung der Kontrolle des Zugriffsvolumens durch Nginx

Zweck Machen Sie sich mit den Nginx-Modulen ngx_h...

Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes

Szenario mit dem Problem des Seitenumblätterns B ...

Detaillierte Erläuterung des Beispielcodes für die Verbesserungen und Änderungen, die CSS-Variablen bei der Entwicklung interaktiver JS-Komponenten mit sich bringen

1. Qualitative Änderungen durch CSS-Variablen Die...

So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4

Nach dem Upgrade von MySQL auf Version 5.7 wurde ...

Hinweise zu den Formularkomponenten des Elements

Elementform und Codeanzeige Weitere Einzelheiten ...

Website-Design-Erfahrung Zusammenfassung der häufigsten Fehler beim Erstellen von Websites

Zur Erinnerung: Egal ob bei der Planung, Gestaltun...

So stellen Sie die MySQL5.7-Kodierung auf utf8mb4 ein

Ich bin vor kurzem auf ein Problem gestoßen. Die ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22

Installation und Konfiguration von MySQL8.0.22 (s...

Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL

Für das, was ich heute schreiben werde, lief das ...

Zusammenfassung des Unterschieds zwischen der Verwendung von „from“ und „join“ zum Abfragen zweier Tabellen in MySQL

Vorwort In MySQL ist die Abfrage mehrerer Tabelle...

js konvertiert ein mehrdimensionales Array in ein eindimensionales Array und ordnet es dann neu

Inhaltsverzeichnis Lassen Sie uns zunächst über d...

Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation

Standardmäßig läuft Docker über einen nicht verne...

MYSQL Performance Analyzer EXPLAIN Anwendungsbeispielanalyse

Dieser Artikel veranschaulicht anhand eines Beisp...

Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle

Inhaltsverzeichnis Gängige Komprimierungsformate:...