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
Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet
Erster Schritt: Klicken Sie in VMware auf "B...
So legen Sie die Parameter für die Post-Request-Druckeranforderung für Nginx-Protokolle fest
【Vorwort】 Die SMS-Funktion unseres Projekts beste...
Grundkenntnisse zu MySQL – Lernhinweise
Datenbank anzeigen show databases; Erstellen eine...
Tutorial-Diagramm zur kostenlosen 64-Bit-Installationsversion von MySQL 5.7.31
1. Herunterladen Download-Adresse: https://dev.my...
Detaillierte Erklärung zur Lösung des Problems „Position: Fester fester Positionierungsversatz“
Frage Die feste CSS-Positionierung position:fixed...
Sehen Sie sich die häufig verwendeten SQL-Anweisungen in MySQL an (ausführliche Erklärung)
#mysql -uroot -p Passwort eingeben mysql> voll...
Vue implementiert eine einfache Produktion von Zählern
In diesem Artikelbeispiel wird der einfache Imple...
vitrualBox+ubuntu16.04 installieren Sie Python3.6, neuestes Tutorial und detaillierte Schritte
Da ich derzeit zum Erlernen von Deep Learning die...
Vue implementiert die Countdown-Komponente für zweite Kills
In diesem Artikel wird der spezifische Code von V...
Gemeinsame Eigenschaften des Framesets (Unterteilung von Frames und Fenstern)
Ein Frame ist ein Webseitenbildschirm, der in mehr...
Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue
Wirkung: Ideen: Verwenden Sie das Eingabetypattri...
Detailliertes Tutorial zur Installation von MySQL 8.0 aus dem Quellcode auf CentOS 7.4
Inhaltsverzeichnis 1. Umwelt 2. Vorbereitung 3. I...
Detaillierte Erläuterung der Redis-Master-Slave-Replikationspraxis mit Docker
Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...
jQuery Treeview-Baumstrukturanwendung
In diesem Artikelbeispiel wird der Anwendungscode...
So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox
Voraussetzung: Das Webentwickler-Plugin wurde inst...