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框内的值也会跟着改变，也会触发事件，获取新值
以上这篇js最简单的双向绑定实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
js 事件小结 表格区别...2007-08-08
在前端开发中,常用的数据加密技术包括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实现页面打印（整体、局部），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧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动态添加与删除select中的Option对象(示例代码)
本篇文章主要介绍了JS动态添加与删除select中的Option对象(示例代码) 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了JavaScript在进行惰性加载时的一些优化技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要介绍了js 实现碰撞检测的示例，帮助大家更好的制作js特效，美化自身网页，感兴趣的朋友可以了解下2020-10-10
最新评论