suchen

Heim  >  Artikel  >  Web-Frontend  >  Front-End-JS-Zwei-Wege-Datenbindung

Front-End-JS-Zwei-Wege-Datenbindung

小云云
小云云Original
2017-12-08 16:16:571968Durchsuche

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: &#39;Hello&#39;
    };
    Object.defineProperty(obj, &#39;infoBind&#39;, {
        get: function () {
            return this.seeYou;
        },
        set: function (newValue) {
            document.getElementById(&#39;infoShow&#39;).innerText = newValue;
            document.getElementsByName(&#39;infoInsert&#39;)[0].value = newValue;
        }
    });
    document.getElementsByName(&#39;infoInsert&#39;)[0].addEventListener(&#39;keyup&#39;, 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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vier Arten von for-Schleifen in jsNächster Artikel：Vier Arten von for-Schleifen in js

In Verbindung stehende Artikel

Mehr sehen