Comment implémenter la liaison bidirectionnelle dans js-js tutoriel-php.cn

Comment implémenter la liaison bidirectionnelle dans js

亚连

Libérer： 2018-06-14 10:36:39

original

2256 Les gens l'ont consulté

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>

Copier après la connexion

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.