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 网页跳转的方法
Dec 24 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
再谈javascript原型继承
Nov 10 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python获取当前时间的方法
2014/01/14 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
详细分析Python collections工具库
2020/07/16 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
大学生先进事迹材料
2014/02/16 职场文书
材料加工工程求职信
2014/02/19 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2014年人事部工作总结
2014/12/03 职场文书
何玥事迹观后感
2015/06/16 职场文书
《春酒》教学反思
2016/02/22 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书