js最簡單的雙向綁定實例講解
更新時間：2018年01月02日 14:26:10 作者：專注前端30年
下面小編就為大家分享一篇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層修改后的回調(diào)，最后設置的值是"+val);
});
input.onkeyup = function () {
obj.input = input.value;
};
</script>
</body>
</html>
代碼測試
修改了input內(nèi)的值，會看到控制臺打印出新的值
在控制臺修改obj.input的值，input框內(nèi)的值也會跟著改變，也會觸發(fā)事件，獲取新值
以上這篇js最簡單的雙向綁定實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實例分析
- Nuxt.js 數(shù)據(jù)雙向綁定的實現(xiàn)
- Vue.js單向綁定和雙向綁定實例分析
- Vue.js 踩坑記之雙向綁定
- JS原生數(shù)據(jù)雙向綁定實現(xiàn)代碼
- AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解
- jquery,js簡單實現(xiàn)類似Angular.js雙向綁定
- 使用Object.defineProperty實現(xiàn)簡單的js雙向綁定
- 輕松實現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
由于語言設計上的原因，JavaScript 沒有真正意義上“類”的概念。而通常使用的 new 命令實例化對象的方法，其實是對原型對象的實例化。2011-08-08
這篇文章主要為大家介紹了JavaScript函數(shù)this指向，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了JavaScript閉包，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
最近由于需要我們將相關(guān)id的重復的去掉，一個是客戶端一個后臺程序把關(guān)，這里分享下js的去重復id的實現(xiàn)代碼2013-07-07
這篇文章主要介紹了JS動態(tài)創(chuàng)建DOM元素的方法,涉及javascript動態(tài)創(chuàng)建DOM元素及DOM元素事件綁定與刪除的相關(guān)技巧,需要的朋友可以參考下2015-06-06
layui數(shù)據(jù)表格 table.render 報錯的解決方法
今天小編就為大家分享一篇layui數(shù)據(jù)表格 table.render 報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
基于JavaScript實現(xiàn)除夕煙花秀與隨機祝福語
新年即將來臨，本文將為大家介紹一個基于JavaScript實現(xiàn)的頁面特效：煙花秀+春節(jié)隨機祝福語。文中的示例代碼講解詳細，感興趣的可以了解一下2022-01-01
js中document.write和document.writeln的區(qū)別
這篇文章主要介紹了js中document.write和document.writeln的區(qū)別,需要的朋友可以參考下2018-03-03
使用js實現(xiàn)按鈕的滑動效果，通過更改按鈕的顯示樣式，來實現(xiàn)按鈕動態(tài)滑動,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JavaScript Array對象使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09