Maison > Article > interface Web > Comment implémenter la liaison bidirectionnelle dans js

Comment implémenter la liaison bidirectionnelle dans js

亚连original: 2018-06-14 10:36:392257parcourir

Maintenant, je vais partager avec vous une explication de l'exemple de liaison bidirectionnelle le plus simple en js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Copiez simplement le code, mettez-le sur la page et exécutez-le pour voir l'effet

<!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>

Test de code

Si vous modifiez la valeur dans l'entrée, vous verrez la nouvelle valeur imprimée sur la console

Modifiez la valeur de obj.input dans la console et la valeur dans le La zone de saisie changera également en conséquence. Déclenchez des événements et obtenez de nouvelles valeurs

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus