js最简单的双向绑定实例讲解


Posted in Javascript onJanuary 02, 2018

把代码复制放到页面里面运行看一下效果就好了

<!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最简单的双向绑定实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript检查表单数据是否改变的方法
Jul 30 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
iView框架问题整理小结
Oct 16 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 #Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 #Javascript
JS实现验证码倒计时的注册页面
Jan 02 #Javascript
使用socket.io实现简单聊天室案例
Jan 02 #Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
javascript的函数
2007/01/31 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
工作疏忽检讨书
2014/01/25 职场文书
心理学专业求职信
2014/06/16 职场文书
论文致谢词范文
2015/05/14 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
团支部书记竞选稿
2015/11/21 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB