接触到Angulr.js和Vue.js后，提到最多的就是双向绑定

下面将用JavaScript实现数据的双向绑定

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

    <input type="text" id="foo" value="as"/>

</body>

<script type="text/javascript">

function bindModelInput(obj, property, domElem) {

  Object.defineProperty(obj, property, {

    get: function() {

        return domElem.value;

    },

    set: function(newValue) {

        debugger;

        domElem.value = newValue;

    },

    configurable: true

  });

}

user = {};

var inputElem = document.getElementById("foo");

bindModelInput(user,'name',inputElem);

debugger;

user.name = "Joe";

alert("input value is now "+inputElem.value) //input元素现在的值是'Joe'

inputElem.value = 'Bob';

alert("user.name is now "+user.name) //现在model中的value是Bob

</script>

</html>

JavaScript实现数据的双向绑定的更多相关文章

  1. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  2. 数据的双向绑定 Angular JS之开端篇

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  3. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  4. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  5. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  6. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  7. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  8. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  9. AnjularJS系列3 —— 数据的双向绑定

    第三篇,双向的数据绑定 数据绑定是AnguarJS的特性之一,避免书写大量的初始代码从而节约开发时间 数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应 ...

随机推荐

  1. 大数据(bigdata)练习题

    1.在HDFS文件系统的根目录下创建递归目录“1daoyun/file”,将附件中的BigDataSkills.txt文件,上传到1daoyun/file目录中,使用相关命令查看文件系统中1daoyu ...

  2. 【DSP开发技术】影响高性能DSP功耗的因素及其优化方法

    影响高性能DSP功耗的因素及其优化方法 德州仪器DSP技术应用工程师 冯华亮 摘要 本文讨论影响高性能DSP功耗的因素,介绍一些DSP功耗的优化方法. 随着嵌入式应用需求的不断提高,DSP的速度也不断 ...

  3. 记录一次SignalR服务端实现过程

    前言:最近手上一个项目需要后端实时推送数据到前端,第一个想到的就是微软的SignalR,由于之前都是平时没事写的Demo,没有用到实际项目中,这次恰好用到了,因此记录下来整个实现过程(网上也有很多类似 ...

  4. Odoo 13 released..

    origin https://medium.com/@jc_57445/odoo-13-is-fantastic-f2b421696b49 Most striking changes The most ...

  5. 最新 美图java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.美图等10家互联网公司的校招Offer,因为某些自身原因最终选择了美图.6.7月主要是做系统复习.项目复盘.LeetCode ...

  6. 创建多个Fragment可滑动界面

    创建新项目,选择Tabbed Activity 默认就有2个Fragment,这里我们删除相关代码. 在切换时 FragmentPagerAdapter onDestroyView onCreateV ...

  7. 洛谷 题解 P1133 【教主的花园】

    $n<=10^5 $ O(n)算法 状态 dp[i][j][k]表示在第i个位置,种j*10的高度的树,且这棵树是否比相邻两棵树高 转移 dp[i][1][0]=max(dp[i-1][2][1 ...

  8. Java:集合类的数据结构

    本文源自参考<Think in Java>,多篇博文以及阅读源码的总结 前言 Java的集合其实就是各种基本的数据结构(栈,队列,hash表等),基于业务需求进而演变出的Java特有的数据 ...

  9. （二）mybatis框架原理（图解）

    目录 mybatis 框架原理图(粗略版) mybatis 框架原理图(粗略版)

  10. element-ui当中table组件的合并行和列的属性:span-method的用法

    背景 最近基本上都是以Vue来构建项目,而UI框架也基本上都是使用的element-ui,所以里面组件用的也是越来越多,今天想记录的是非常非常小的一个属性的用法. Table组件 Table组件用了真 ...