Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0
Object.defineProperty verstehenGrammatik:
obj und prop sind leicht zu verstehen. Beispielsweise definieren wir eine Variable als
Konstante o = {
Name: „xbhog“
}
Unter ihnen bezieht sich obj auf o und prop auf o.name. Als nächstes schauen wir uns den Deskriptor an.
Hinweis: Die Werteattribute, die beschreibbaren Attribute und die Get- und Set-Attribute im Deskriptor schließen sich gegenseitig aus. Es kann nur eines davon existieren. Nachdem wir die Voraussetzungen kennen, implementieren wir die bidirektionale Bindung des V-Modells in VueSchauen wir uns zunächst den Implementierungscode an:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Bidirektionale Datenbindung durch js realisieren</title>
</Kopf>
<Text>
<Eingabetyp="Text"/><br>
<h1>Hallo: <span>Daten aktualisieren</span></h1>
<!-- Realisieren Sie eine bidirektionale Datenbindung durch js -->
<Skript>
// Die Methode gibt das erste HTMLElement-Objekt im Dokument zurück, das dem angegebenen Selektor oder der angegebenen Selektorgruppe entspricht. var ipt = document.querySelector('input');
var p = document.querySelector('span');
var Daten = {Name:""};
/*
Das Oninput-Ereignis wird ausgelöst, wenn der Benutzer etwas eingibt.
Dieses Ereignis wird ausgelöst, wenn sich der Wert eines <input>- oder <textarea>-Elements ändert.
*/
ipt.oninput = Funktion(){
// Übergebe den Wert in ipt.value an den Wert von data.name
Datenname = ipt.Wert;
}
//ipt.value kapern
Objekt.defineProperty(Daten,"Name",{
//Datenabonnement get(){
return ipt.value; //Beim Zugriff wird die get-Methode aufgerufen},
//Datenentführung //Name:Wert
setze(Wert) {
p.innerHTML = Wert;
ipt.Wert = Wert;
}
})
</Skript>
</body>
</html>Zuerst verwenden wir document.querySelector, um die HTML-Objekte der Eingabe- und Span-Tags abzurufen, und definieren dann ein Datenobjekt mit dem leeren Attributnamen. Verwenden Sie den Ereignislistener „oninput“, um Benutzereingaben zu überwachen (dieses Ereignis wird ausgelöst, wenn sich der Wert eines <input>- oder <textarea>-Elements ändert). Übergeben Sie den Wert in ipt.value an den Wert von data.name. Datenname = ipt.Wert; Verwenden Sie Object.defineProperty, um Benutzereingabedaten zu kapern.
Objekt.defineProperty(Daten,"Name",{
//Datenabonnement get(){
return ipt.value; //Beim Zugriff auf data.name wird die get-Methode aufgerufen, um ipt.value aufzurufen und den aktuellen Wert abzurufen},
// Datenentführung set(value) { // Die Set-Methode wird beim Setzen von Daten automatisch aufgerufen p.innerHTML = value;
ipt.Wert = Wert;
}
Der Effekt ist deutlicher: Methode festlegen:
Get-Methode:
Der endgültige Effekt:
Quellen:
ZusammenfassenDies ist das Ende dieses Artikels über die Verwendung von js zur Implementierung der bidirektionalen Datenbindungsfunktion in Vue2.0. Weitere relevante Inhalte zur Verwendung von js zur Implementierung der bidirektionalen Vue2-Bindung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Lösung für das Problem, dass Docker-Protokolle nicht abgerufen werden können
Artikel empfehlen
CSS3 verwendet Transform, um eine bewegliche 2D-Uhr zu erstellen
Nachdem wir den transform Kurs abgeschlossen habe...
Detaillierte Erklärung des Linux-Netstat-Befehls
Inhaltsverzeichnis Linux-Netstat-Befehl 1. Detail...
Lösen Sie das Problem, dass Docker den Hostcomputer unter Mac nicht anpingen kann
Lösung Verzichten Sie auf die Linux-VM, die mit D...
Multiservice-Image-Packaging-Vorgang von Dockerfile unter Aufsicht
Schreiben einer Docker-Datei Konfigurieren Sie di...
Einige Hinweise zur Verwendung von Standard-HTML-Codes bei der Webseitenerstellung
<br />Der häufigste Fehler vieler Website-De...
Implementieren eines Webplayers mit JavaScript
Heute zeige ich Ihnen, wie Sie mit JavaScript ein...
Neue Funktionen in MySQL 8.0 - Einführung in Check Constraints
Inhaltsverzeichnis Vorwort Einschränkungen prüfen...
Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen
CSS3-Hintergrundbild bezogen Kompatibilität: IE9+...
Installieren Sie eine virtuelle Python-Umgebung in Ubuntu 18.04
Nur als Referenz für Python-Entwickler, die Ubunt...
Erläuterung des Arbeitsmechanismus von Namenode und SecondaryNameNode in Hadoop
1) Prozess 2) FSImage und Bearbeitungen Nodenode ...
Vue Front-End HbuliderEslint Echtzeitüberprüfung Automatische Reparatureinstellungen
Inhaltsverzeichnis Installation des ESLint-Plugin...
So verwenden Sie Makros in JavaScript
In Sprachen werden häufig Makros zur Implementier...
Detaillierte Erklärung der Verwendung des chmod-Befehls in Linux
chmod-Befehlssyntax Dies ist die korrekte Syntax ...
Navicat-Verbindung MySQL Fehlerbeschreibungsanalyse
Inhaltsverzeichnis Umfeld Version der virtuellen ...
React implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Todolists
Inhaltsverzeichnis Nehmen Sie Todolist als Beispi...