欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js最簡單的雙向綁定實(shí)例講解

 更新時(shí)間：2018年01月02日 14:26:10   作者：專注前端30年  
下面小編就為大家分享一篇js最簡單的雙向綁定實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

把代碼復(fù)制放到頁面里面運(yùn)行看一下效果就好了

<!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層修改后的回調(diào)，最后設(shè)置的值是"+val);
  });
  input.onkeyup = function () {
    obj.input = input.value;
  };
</script>
</body>
</html>

代碼測試

修改了input內(nèi)的值，會看到控制臺打印出新的值

在控制臺修改obj.input的值，input框內(nèi)的值也會跟著改變，也會觸發(fā)事件，獲取新值

以上這篇js最簡單的雙向綁定實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論