Was ist bidirektionale Datenbindung? Der Inhalt dieses Artikels besteht darin, den relevanten Inhalt der bidirektionalen Datenbindung vorzustellen, damit jeder verstehen kann, warum die bidirektionale Datenbindung implementiert wird und wie eine einfache bidirektionale Datenbindung implementiert wird. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Lassen Sie uns zunächst verstehen, was unidirektionale Datenbindung und bidirektionale Datenbindung sind.
Was ist eine unidirektionale Datenbindung?
Einseitige Bindung zwischen Datenmodell (Modul) und Ansicht (Ansicht).
Wir müssen zuerst die Vorlage schreiben, dann die Vorlage und die Daten (möglicherweise aus dem Hintergrund) integrieren, um HTML-Code zu bilden, und diesen HTML-Code dann in den Dokumentenfluss einfügen. Einfach ausgedrückt handelt es sich um eine DOM-Manipulation von HTML-Elementen.
Nachteile der unidirektionalen Datenbindung: Sobald der HTML-Code generiert wurde, gibt es keine Möglichkeit, ihn zu ändern. Wenn neue Daten angezeigt werden, muss zuerst der vorherige HTML-Code gelöscht und dann die neuen Daten erneut integriert werden Vorlage, um neuen HTML-Code zu erstellen, und fügen Sie ihn dann in den Dokumentenfluss ein.
Was ist bidirektionale Datenbindung?
Zwei-Wege-Bindung zwischen Datenmodell und Ansicht.
Wenn sich die Daten ändern, ändern sich auch die Daten synchron. Man kann sagen, dass die Änderungen des Benutzers an der Ansicht automatisch mit dem Datenmodell synchronisiert werden Auch das Datenmodell erfährt die gleichen Änderungen.
Vorteile der bidirektionalen Datenbindung: Es müssen keine CRUD-Vorgänge (Erstellen, Abrufen, Aktualisieren, Löschen) ausgeführt werden, wie die bidirektionale Datenbindung am häufigsten bei Formularen verwendet wird. so dass, wenn der Benutzer Nachdem die Front-End-Seite die Eingabe abgeschlossen hat, haben wir die vom Benutzer eingegebenen Daten bereits erhalten und sie ohne weitere Operation in das Datenmodell eingefügt.
Native js implementiert eine einfache bidirektionale Datenbindung
Codebeispiel: Der im -Tag angezeigte Inhalt ändert sich mit dem vom Benutzer eingegebenen Inhalt
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js实现简单的双向数据绑定</title> </head> <body> <input type="text" id="userName"> <span id ="uName"></span> <script> var obj={ pwd:"1234" }; //主要使用到了get和set方法,最为关键 Object.defineProperty(obj,"userName",{ get:function(){ console.log('get init'); }, set:function(val){ console.log("set init"); document.getElementById("uName").innerText=val; document.getElementById("userNmae").value=val; } }); document.getElementById("userName").addEventListener("keyup",function(event){ obj.userName=event.target.value; } ) </script> </body> </html>
Rendering:
Zusammenfassung: Das Obige ist der gesamte in diesem Artikel vorgestellte Inhalt zur bidirektionalen Datenbindung. Sie können es selbst ausprobieren, um Ihr Verständnis zu vertiefen . Ich hoffe, dass es für alle beim Lernen hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial, jQuery-Video-Tutorial, Bootstrap-Tutorial!
Das obige ist der detaillierte Inhalt vonWas ist eine bidirektionale Datenbindung? Implementierung einer einfachen bidirektionalen Datenbindung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!