So implementieren Sie eine bidirektionale Bindung in js-js-Tutorial-php.cn

So implementieren Sie eine bidirektionale Bindung in js

亚连

Freigeben： 2018-06-14 10:36:39

Original

2249 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!