Vue implementiert das Umschalten des Anmeldetyps
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung des Login-Typ-Wechsels zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Wirkung der Operation
Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Anmeldetyp wechseln</title>
<script src="../js/vuejs-2.5.16.js"></script>
</Kopf>
<Text>
<div id="app">
<span v-if="istBenutzer">
<label for="userAccount">Benutzerkonto:</label>
<input type="text" id="userAccount" placeholder="Bitte geben Sie Ihr Konto ein" key="userAccount">
</span>
<span v-else>
<label for="userEmail">Benutzer-E-Mail:</label>
<input type="text" id="userEmail" placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein" key="userEmail">
</span>
<button @click="changeType">Typ wechseln</button>
</div>
</body>
<Skript>
const app = new Vue({
el: '#app',
Daten: {
isUser: true
},
Methoden:{
Typ ändern(){
gibt dies zurück.istBenutzer = !dies.istBenutzer
}
}
})
</Skript>
</html>Code-Snippet-Analyse
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:
|
<<: Erläuterung des Prozesses des Docker-Packaging-Node-Projekts
>>: Detaillierte Erklärung redundanter und doppelter Indizes in MySQL
Artikel empfehlen
Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle
Was ist eine Tabelle? Es besteht aus Zellenzellen...
Eine kurze Diskussion über den Aufbau und den Betriebsmechanismus des Echtzeit-Computerframeworks Flink Cluster
Inhaltsverzeichnis 1. Flink-Übersicht 1.1 Grundle...
Untersuchen der Verwendung von Prozentwerten in der Eigenschaft „Hintergrundposition“
Auswirkungen der Hintergrundposition auf die Anze...
Navicat Premium betreibt MySQL-Datenbank (führt SQL-Anweisungen aus)
1. Einführung in Navicat 1. Was ist Navicat? Navi...
Durch das flexible Layout können Unterelemente ihre eigene Höhe beibehalten
Beim Verwenden des Flex-Layouts werden Sie festst...
Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung
Szenario: Die von uns häufig verwendeten Interakt...
So verwenden Sie Nginx, um domänenübergreifende Front-End-Probleme zu lösen
Vorwort Bei der Entwicklung statischer Seiten, wi...
Webprojektentwicklung VUE-Mischungs- und Vererbungsprinzip
Inhaltsverzeichnis Mischen Mixin-Hinweis (doppelt...
vue+element-ui implementiert die Kopfnavigationsleistenkomponente
In diesem Artikel wird der spezifische Code von v...
Fassen Sie die allgemeinen Eigenschaften von BigIn-Funktionen in JavaScript zusammen
Inhaltsverzeichnis 1. Übersicht 2. Attribute 1. M...
Detaillierte Erläuterung des Dezimal-Padding-Problems des Dezimal-Datentyps in MySQL
Vorwort Während des Entwicklungsprozesses verwend...
Schritt-für-Schritt-Anleitung zur Sicherheitsüberprüfung auf dem Win2008-Server (Anweisungen zur täglichen Wartung)
Das Dokument ist schon seit einiger Zeit geschrie...
So stellen Sie npm so ein, dass Pakete aus mehreren Paketquellen gleichzeitig geladen werden
Inhaltsverzeichnis 1. Lokalen Speicher erstellen ...
Führen Sie die Shell oder das Programm im Docker-Container auf dem Host aus.
Um zu vermeiden, dass für den Betrieb immer wiede...
Detaillierte Erklärung des Unterschieds zwischen URL-Endungen mit / und ohne / in der Proxy_Pass-Konfiguration von Nginx
Wenn nginx proxy_pass konfiguriert, ist der Unter...