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層修改后的回調，最后設置的值是"+val);
});
input.onkeyup = function () {
obj.input = input.value;
};
</script>
</body>
</html>
代碼測試
修改了input內的值，會看到控制臺打印出新的值
在控制臺修改obj.input的值，input框內的值也會跟著改變，也會觸發(fā)事件，獲取新值
以上這篇js最簡單的雙向綁定實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
js 事件小結 表格區(qū)別...2007-08-08
在前端開發(fā)中,常用的數據加密技術包括Base64編碼、MD5哈希、SHA-256哈希、AES對稱加密、RSA非對稱加密和HMAC消息認證碼,這些加密方式提供了不同層次的數據安全保護,適用于不同的安全需求和場景,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了JavaScript實現時間倒計時跳轉(推薦)的相關資料,涉及到settimeout和setinterval方法的介紹，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
老生常談JavaScript獲取CSS樣式的方法(兼容各瀏覽器)
大家都知道CSS樣式有三種類型：行內樣式、內部樣式和外部樣式，這篇文章主要介紹了javaScript獲取CSS樣式的方法(兼容各瀏覽器),需要的朋友可以參考下2018-09-09
本篇文章主要介紹了JS實現頁面打?。ㄕw、局部），小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
一文詳解為什么JavaScript中的JSON.parse()報錯
這篇文章主要介紹了JavaScript中JSON.parse()方法的使用和常見錯誤,包括非法JSON格式、包含不可解析的字符、使用單引號等,并提供了相應的解決方案和實際項目中的代碼示例,需要的朋友可以參考下2025-03-03
JavaScript處理中文字符串的Base64編碼與解碼的兩種方法
這篇文章主要介紹了在 JavaScript 中處理中文字符串的 Base64 編碼與解碼,解釋了 Base64 編碼與中文字符沖突的原因,分別闡述了手動實現和使用TextEncoder和TextDecoder API 兩種方法,包括編碼和解碼的具體實現及示例,最后總結了兩種方法的適用場景2025-01-01
JS動態(tài)添加與刪除select中的Option對象(示例代碼)
本篇文章主要介紹了JS動態(tài)添加與刪除select中的Option對象(示例代碼) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了JavaScript在進行惰性加載時的一些優(yōu)化技巧,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
這篇文章主要介紹了js 實現碰撞檢測的示例，幫助大家更好的制作js特效，美化自身網頁，感興趣的朋友可以了解下2020-10-10