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 函数式编程
Aug 16 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
vue中在vuex的actions中请求数据实例
Nov 08 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的一个登录的类 [推荐]
2007/03/16 PHP
PHP $_SERVER详解
2009/01/16 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
九种原生js动画效果
2015/11/11 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python求最大连续子数组的和
2018/07/07 Python
详解python做UI界面的方法
2019/02/27 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
《梅兰芳学艺》教学反思
2014/02/24 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
《角的度量》教学反思
2016/02/18 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Java基于字符界面的简易收银台
2021/06/26 Java/Android
centos8安装MongoDB的详细过程
2021/10/24 MongoDB