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
So installieren Sie Docker und Portainer in Kali
Mit dem Aufkommen von Docker haben sich viele Die...
CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse
Installieren Sie ZLMediaKit auf centos6 Der Autor...
Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App
Inhaltsverzeichnis 1. Anwendung und Konfiguration...
js zur Realisierung eines Web-Musikplayers
Dieser Artikel enthält einfachen HTML- und Musikp...
Implementierung der MySQL-Benutzerrechteverwaltung
1. Einführung in MySQL-Berechtigungen Es gibt 4 T...
CSS zum Erzielen eines Animationseffekts der Tik Tok-Abonnementschaltfläche
Ich habe mir vor einiger Zeit Tik Tok angesehen u...
Verstehen Sie das CSS3-Rasterlayout in 10 Minuten
Grundlegende Einführung Im vorherigen Artikel hab...
Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL
Wenn ein Index die Werte aller abzufragenden Feld...
Verwenden Sie xshell, um eine Verbindung zum Linux-Server herzustellen
Vorteile der Verwendung von xshell zur Verbindung...
Vollständige Schritte zur Installation von mysql5.7 auf dem Mac (mit Bildern und Text)
Ich habe vor Kurzem ein Mac-System verwendet und ...
Bei der SQL-Optimierung treten häufig Fehler auf, weil Sie die Verwendung von MySQL nicht verstehen.
Inhaltsverzeichnis 1. Vorbereitung 2. Einführung ...
Beispiele für die Verwendung temporärer Tabellen in MySQL
Ich war in den letzten beiden Tagen etwas beschäf...
Layui implementiert den Bestätigungscode der Anmeldeschnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Die detaillierte Installation und Konfiguration d...
Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle
Temporäre Tabellen und Speichertabellen Eine Spei...