Heim > Artikel > Web-Frontend > So implementieren Sie eine bidirektionale Bindung in js
So implementieren Sie eine bidirektionale Bindung in js
- 亚连Original
- 2018-06-14 10:36:392220Durchsuche
Im Folgenden werde ich Ihnen eine Erklärung des einfachsten bidirektionalen Bindungsbeispiels in js geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.
Kopieren Sie einfach den Code, platzieren Sie ihn auf der Seite und führen Sie ihn aus, um den Effekt zu sehen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
function watch(obj,key,callback) {
var old = obj[key];
Object.defineProperty(obj,key,{
set:function(val){
var oldVal = old;
old = val;
callback(val,oldVal,this);
},
get:function(){
return old;
}
});
}
var input = document.getElementById("myinput");
var obj = {};
watch(obj, "input",function (val) {
input.value = val;
console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);
});
input.onkeyup = function () {
obj.input = input.value;
};
</script>
</body>
</html>Codetest
Wenn Sie den Wert in der Eingabe ändern, wird der neue Wert auf der Konsole ausgedruckt angezeigt.
Ändern Sie den Wert von obj.input auf der Konsole, wird der Wert im Eingabefeld angezeigt Ändern Sie sich auch entsprechend und das Ereignis wird ausgelöst. Erhalten Sie neue Werte.
Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie die Eingabesuchfunktion mit JS
So verwenden Sie das Knotenmodul und das NPM-Paketverwaltungstool
So implementieren Sie ein Ratespiel mit JavaScript (ausführliches Tutorial)
So implementieren Sie verschiedene Sortiermethoden mit js
So verwenden Sie die CDN-Optimierung in Vue
So beurteilen Sie die Dateitypgröße in js
So beurteilen Sie den Dateityp Größe in js
So implementieren Sie die Dropdown-Box-Fuzzy-Abfragefunktion in Angular
Informationen zu Kryptomodul-Sicherheitskenntnissen in Nodejs (ausführliches Tutorial )
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine bidirektionale Bindung in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!