suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie eine bidirektionale Bindung in js

So implementieren Sie eine bidirektionale Bindung in js

亚连
亚连Original
2018-06-14 10:36:392277Durchsuche

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!

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：Wie Angular CLI Blaupausen zum Generieren von Code verwendetNächster Artikel：Wie Angular CLI Blaupausen zum Generieren von Code verwendet

In Verbindung stehende Artikel

Mehr sehen