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

Linux-Befehl „exa“ (bessere Dateianzeige als „ls“)

Installieren Befolgen Sie zur Installation die RE...

56 praktische JavaScript-Toolfunktionen zur Verbesserung der Entwicklungseffizienz

Inhaltsverzeichnis 1. Digitaler Betrieb (1) Gener...

Zusammenfassung der Betriebsaufzeichnungen zum Ändern der MyISAM-Speicher-Engine in Innodb in MySQL

Im Allgemeinen bietet MySQL standardmäßig eine Vi...

So wählen Sie zwischen MySQL CHAR und VARCHAR

Inhaltsverzeichnis VARCHAR- und CHAR-Typen Abschl...

So legen Sie den Standardwert eines MySQL-Felds fest

Inhaltsverzeichnis Vorwort: 1. Standardwertbezoge...

Detaillierte Erklärung der Top-Befehlsausgabe in Linux

Vorwort Ich glaube, jeder hat den Befehl top unte...

Beispiele für die Interaktion zwischen MySQL und Python

Inhaltsverzeichnis 1. Daten vorbereiten Erstellen...

Klassischer MySQL-High-Level-/Befehlszeilenvorgang (schnell) (empfohlen)

Da ich lernen muss, wie man Server und Datenbanke...

Beispielcode für die Javascript-Operation „Alles auswählen/Alles abwählen“ in HTML

Code kopieren Der Code lautet wie folgt: <html...

Beschreibung des Meta-Viewport-Attributs in der HTML-Webseite

Beschreibung der HTML-Meta-Viewport-Attribute Was...

So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

Ursache So importieren Sie externe Dateien in ein...

Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

Inhaltsverzeichnis Konfigurieren Sie zuerst packa...

Beispielcode für CSS-Spalten zum Erreichen eines zweiseitig ausgerichteten Layouts

1. Im Kreis herumlaufen Nach einigem Herumexperim...

Drei Methoden zum Ändern des Hostnamens von Centos7

Methode 1: Hostnamectl-Änderung Schritt 1 Überprü...

Vue+echarts realisiert gestapelte Balkendiagramme

In diesem Artikel wird der spezifische Code von V...