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

赞 (0)

相关推荐

  • AngularJS 双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl

  • jQuery实现html双向绑定功能示例

    本文实例讲述了jQuery实现html双向绑定功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9.1.js"></script

  • javascript实现数据双向绑定的三种方式小结

    前端数据的双向绑定方法 前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实现数据双向绑定主要有以下三种. 1.手动绑定 比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作:以视图驱动数据变化的场景主要应用与input.select.textarea等

  • JavaScript中双向数据绑定详解

    双向数据绑定指的是将对象属性变化绑定到UI,或者反之.换句话说,如果我们有一个拥有name属性的user对象,当我们给user.name赋予一个新值是UI也会相应的显示新的名字.同样的,如果UI包括了一个输入字段用来输入用户名,输入一个新的值会导致user对象中的那么属性发生变化. 许多流行的客户端JavaScript框架例如Ember.js,AngularJS以及KnockoutJS都将双向数据绑定作为自己的头号特性.但是这并不意味着从零开始实现双向数据绑定就很困难,同样的当我们需要双向数据绑

  • JS原生数据双向绑定实现代码

    JS原生数据双向绑定实现代码

    代码如下: <span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> fu

  • AngularJS学习笔记（三）数据双向绑定的简单实例

    AngularJS学习笔记（三）数据双向绑定的简单实例

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb

  • Angular JS数据的双向绑定详解及实例

    Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="Count

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

    把代码复制放到页面里面运行看一下效果就好了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="myinput" > <sc

  • vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    目录 实现过程 1.实现一个Observer 2.实现Watcher 3.实现Compile 总结 参考文献:https://www.jb51.net/article/160654.htm https://www.jb51.net/article/239554.htm MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Model层代表的是模型.数据,可以在Model层中

  • 使用Vue.js实现数据的双向绑定

    目录 如何用Vue.js实现数据的双向绑定? 1. 理解双向绑定 2. 使用v-model指令 3. 使用自定义组件实现双向绑定 4. 数据劫持 5. 模板引擎 6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定? 在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据.在本文中,我们将介绍如何用Vue.js实现数据的双向绑定. 1. 理解双向绑定 首先,我们需要了解双向绑定的原理.在Vue.js中

  • js学习总结_选项卡封装(实例讲解)

    这个插件对应的html的结构如下 <div class='box' id='tabFir'> <ul id='tabOptions'> <li class='select'>页卡一</li> <li>页卡二</li> <li>页卡三</li> </ul> <div class='select'> <div>1</div> <div>2</div&

  • js定时器+简单的动画效果实例

    1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc

  • vue.js的简单自动求和计算实例

    一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面 我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>

  • vue实现简单数据双向绑定

    vue实现简单数据双向绑定

    本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下 这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue双向数据绑定 -> Object.defineProperty() //2.0核心语法 -> 数据代理 -> 双向绑定 -> 订阅发布模式 compile-> 模版解析 (template模版 html 指令 {{表达式}}) observer-> 观察者(订阅发布) data里的所有的属性

  • JS时间控制实现动态效果的实例讲解

    如下所示: <script> BOM //Bowers Object Model 浏览器对象模型 setTimeout() // 延迟执行一次 setInterval() // 间隔执行 var a = 300; window.setTimeout('abc(a)',3000); // 自定义函数赋值 function abc(i) { alert(i); } //setInterval('alert(123)',2000); var dh = document.getElementById(

  • JS一个简单的注册页面实例

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> // $(function(){ // $("input[na

  • Python字典实现简单的三级菜单(实例讲解)

    如下所示: data = { "北京":{ "昌平":{"沙河":["oldboy","test"],"天通苑":["链接地产","我爱我家"]}, "朝阳":{"望京":["奔驰","陌陌"],"国贸":["CICC",&quo

随机推荐