Heim > Artikel > Web-Frontend > js einfacher Fallcode mit bidirektionaler Bindung

js einfacher Fallcode mit bidirektionaler Bindung

小云云Original: 2018-03-14 18:02:551348Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich den einfachen bidirektionalen Bindungscode von js mit, um ihn auszuführen und den Effekt zu sehen.

<span style="font-size: 14px;"><!DOCTYPE html><html lang="en"><head><br/>    <meta charset="UTF-8"><br/>    <title>Title</title></head><body><input type="text" id="myinput" ><script><br/>    function watch(obj,key,callback) {<br/>        var old = obj[key];        Object.defineProperty(obj,key,{<br/>            set:function(val){<br/>                var oldVal = old;<br/>                old = val;<br/>                callback(val,oldVal,this);<br/>            },<br/>            get:function(){<br/>                return old;<br/>            }<br/>        });<br/>    }    var input = document.getElementById("myinput");    var obj = {};<br/>    watch(obj, "input",function (val) {<br/>        input.value = val;<br/>        console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);<br/>    });<br/><br/>    input.onkeyup = function () {<br/>        obj.input = input.value;<br/>    };</script></body></html><br/></span>

Codetest

Wenn Sie den Wert in der Eingabe ändern, wird der neue Wert angezeigt Der Wert von
Ändern Sie den Wert von obj.input in der Konsole, der Wert im Eingabefeld ändert sich ebenfalls entsprechend und an Ereignis wird ausgelöst, um den neuen Wert zu erhalten

Verwandte Empfehlungen:

Mitteilung über drei Methoden zur Implementierung von zwei- Weg-Datenbindung in JavaScript

Zwei-Wege-Bindung von Javascript-Daten einfach implementieren_Javascript-Fähigkeiten

Vertiefendes Verständnis des Implementierungsprinzips der bidirektionalen Bindung von vue.js

Das obige ist der detaillierte Inhalt vonjs einfacher Fallcode mit bidirektionaler Bindung. 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：JavaScript wird mit der JQuery-Bibliothek kombiniert, um Click-to-Edit-Formulare einfach zu implementierenNächster Artikel：JavaScript wird mit der JQuery-Bibliothek kombiniert, um Click-to-Edit-Formulare einfach zu implementieren

In Verbindung stehende Artikel

Mehr sehen