首頁 > web前端 > js教程 > 主體

js簡單雙向綁定案例程式碼

小云云
發布: 2018-03-14 18:02:55
原創
1367 人瀏覽過

本文主要跟大家分享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資料雙向綁定_javascript技巧

#深入理解vue.js雙向綁定的實作原理

#

以上是js簡單雙向綁定案例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板