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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
用webAPI实现图片放大镜效果
Nov 23 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学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python中一行和多行import模块问题
2018/04/01 Python
Pyqt5实现英文学习词典
2019/06/24 Python
django 多数据库及分库实现方式
2020/04/01 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
广告学专业应届生求职信
2013/10/01 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
安全检查汇报材料
2014/12/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python