In diesem Artikel werden wir die bidirektionale Datenbindung von Front-End-JS mit Ihnen teilen. Wir hoffen, dass sie für alle hilfreich ist.
<html>
<head>
<title>textBind</title>
</head>
<body>
<input type="text" name="infoInsert">
<p id="infoShow"></p>
<script type="text/javascript">
var obj = {
seeYou: 'Hello'
};
Object.defineProperty(obj, 'infoBind', {
get: function () {
return this.seeYou;
},
set: function (newValue) {
document.getElementById('infoShow').innerText = newValue;
document.getElementsByName('infoInsert')[0].value = newValue;
}
});
document.getElementsByName('infoInsert')[0].addEventListener('keyup', function () {
obj.infoBind = this.value;
});
</script>
</body>
</html>Anhand des obigen Codes ist es nicht schwer zu erkennen, dass das zugrunde liegende Implementierungsprinzip der bidirektionalen Datenbindung, das im Framework verwendet wird, über das Attribut defineProperty in ES5 implementiert wird.
Verwandte Empfehlungen:
JS-Methode zur Implementierung der bidirektionalen Datenbindung
react.js Eltern-Kind-Komponentendaten Beispielanzeige für Bindung in Echtzeit
Detailliertes einfaches Beispiel für die bidirektionale Datenbindung von AngularJS
Das obige ist der detaillierte Inhalt vonFront-End-JS-Zwei-Wege-Datenbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
