js簡單雙向綁定案例程式碼
- 小云云原創
- 2018-03-14 18:02:551361瀏覽
本文主要跟大家分享js簡單雙向綁定案例程式碼，把程式碼複製放到頁裡面運行看一下效果就好了，希望能幫助到大家。
<span style="font-size: 14px;"><!DOCTYPE html><html lang="en"><head><br/> <meta charset="UTF-8"><br/> <title>Title</title></head><body><input type="text" id="myinput" ><script><br/> function watch(obj,key,callback) {<br/> var old = obj[key]; Object.defineProperty(obj,key,{<br/> set:function(val){<br/> var oldVal = old;<br/> old = val;<br/> callback(val,oldVal,this);<br/> },<br/> get:function(){<br/> return old;<br/> }<br/> });<br/> } var input = document.getElementById("myinput"); var obj = {};<br/> watch(obj, "input",function (val) {<br/> input.value = val;<br/> console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);<br/> });<br/><br/> input.onkeyup = function () {<br/> obj.input = input.value;<br/> };</script></body></html><br/></span>程式碼測試
#修改了input內的值，會看到控制台印出新的值
在控制台修改obj.input的值，input框內的值也會跟著改變，也會觸發事件，取得新值
相關推薦：
輕鬆實作javascript資料雙向綁定_javascript技巧
#以上是js簡單雙向綁定案例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn