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

js einfacher Fallcode mit bidirektionaler Bindung

小云云
Freigeben: 2018-03-14 18:02:55
Original
1398 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage