首頁 > 文章 > web前端 > 在js中如何實現雙向綁定

在js中如何實現雙向綁定

亚连原創: 2018-06-14 10:36:392256瀏覽

下面我就為大家分享一篇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如何實現輸入搜尋功能

#如何使用node模組與npm套件管理工具

使用JavaScript如何實作猜拳遊戲（詳細教學）

#使用js如何實作各種排序方法

在vue中如何使用cdn優化

在js中如何實作判斷檔案類型大小

在Angular中如何實作下拉框模糊查詢功能

#在Nodejs中有關crypto模組安全知識（詳細教學）

以上是在js中如何實現雙向綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Angular CLI如何使用藍本產生程式碼下一篇：Angular CLI如何使用藍本產生程式碼

看更多