js最简单的双向绑定实例讲解

2019/6/27 20:29:13

编程Tag： js 双向绑定

本文主要是介绍js最简单的双向绑定实例讲解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

把代码复制放到页面里面运行看一下效果就好了

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

代码测试

修改了input内的值，会看到控制台打印出新的值

在控制台修改obj.input的值，input框内的值也会跟着改变，也会触发事件，获取新值

以上这篇js最简单的双向绑定实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持找一找教程网。

这篇关于js最简单的双向绑定实例讲解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js最简单的双向绑定实例讲解

相关编程文章