Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist
|
In diesem Artikelbeispiel wird der spezifische Code von Vue geteilt, um zu überprüfen, ob der Benutzername für Ihre Referenz verfügbar ist. Der spezifische Inhalt ist wie folgt Wenn Sie einen Namen in das Eingabefeld eingeben, überprüfen Sie, ob dieser vorhanden ist, wenn Sie den Fokus verlieren. Wenn er bereits vorhanden ist, fordern Sie ihn zur erneuten Eingabe auf. Wenn er nicht vorhanden ist, fordern Sie ihn auf, ihn zu verwenden. Der Code lautet wie folgt <!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Listener-Beispiel</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</Kopf>
<Text>
<div id="app">
<input type="text" v-model.lazy="msg"> <span> {{ span1 }}</span>
</div>
<Skript>
// Der Listener überwacht die aktuellen Datenänderungen. Wenn die Daten im Textfeld den Fokus verlieren,
// Übernehmen Sie den Wert im Textfeld zur Ausführung in das Backend, treffen Sie eine Beurteilung basierend auf den vom Backend zurückgegebenen Daten und geben Sie eine Eingabeaufforderung aus var vm = new Vue({
el: "#app",
Daten: {
Nachricht: "",
span1: "",
},
Methoden: {
show1: function (val) {//Der Wert hier ist der Wert im Textfeld//Asynchrone Anforderung ausführen, in den Hintergrund gehen, um Daten abzurufen, simulieren, in den Hintergrund gehen, um Daten abzurufen var that = this; //Da es in setTimeout auch ein this-Objekt gibt, ist dieses Objekt das Dokumentobjekt setTimeout(function () { //Wenn hier val geschrieben wird, wird das if nicht eingegeben if (val === "aaa") {
that.span1 = "Der Benutzername ist nicht verfügbar, bitte ändern Sie ihn";
} anders {
that.span1 = "Benutzername kann verwendet werden";
}
}, 2000);
}
},
betrachten:
msg: Funktion (Wert) {
dies.show1(Wert);
this.span1 = "Überprüfen";
},
}
})
</Skript>
</body>
</html>Die Wirkung ist wie folgt
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:
|
<<: Detailliertes grafisches Tutorial zum Aktivieren des sicheren Remotezugriffs mit Docker
>>: Beispiele für die Erstellung und Verwendung von MySQL-Triggern
Artikel empfehlen
Detailliertes Tutorial zum Bereitstellen von Jenkins basierend auf Docker
0. Als ich dieses Dokument erstellte, war es unge...
MySQL NULL-Datenkonvertierungsmethode (unbedingt lesen)
Wenn Sie MySQL zum Abfragen der Datenbank verwend...
Detaillierte Erklärung gängiger Befehle in MySQL 8.0+
Aktivieren Sie den Fernzugriff Aktivieren Sie die...
HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)
Im neuesten HTML-Standard gibt es einen Calc-CSS-A...
Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)
Es gibt bereits viele Artikel über Slot-Scope auf...
So zeigen Sie die Netzwerkroutingtabelle in Ubuntu an
Was sind Routing und Routing-Tabellen in Linux? U...
Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr
Inhaltsverzeichnis npm herunterladen Schritt (1) ...
Ideen und Codes zur Realisierung des Lupeneffekts in js
In diesem Artikelbeispiel wird der spezifische Co...
Javascript, um den Effekt des Schließens von Anzeigen zu erzielen
Hier ist eine Fallstudie zu Ihrer Information, wi...
Implementierung eines einfachen Timers in JavaScript
In diesem Artikelbeispiel wird der spezifische Ja...
Lösung für Linux, das nicht alle Befehle unterstützt
Was soll ich tun, wenn Linux nicht alle Befehle u...
Mysql Workbench - Abfragemethode für MySQL-Datenbanken
Mysql Workbench ist ein Open-Source-Datenbankclie...
Implementierung von Nginx-Weiterleitungsübereinstimmungsregeln
1. Regulärer Ausdrucksabgleich ~ für Groß- und Kl...
Lösung - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Unzureichende Berechtigungen
1) Geben Sie den Ordnerpfad ein, in dem die JDK-D...
Detaillierte Erläuterung des Selinux-Grundkonfigurationstutorials unter Linux
selinux ( Security-Enhanced Linux) ist ein Linux-...