接触到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. Python_小林的爬取QQ空间相册图片链接程序

    前言 昨天看见某人的空间有上传了XXXX个头像,然后我就想着下载回来[所以本质上这是一个头像下载程序],但是一个个另存为太浪费时间了,上网搜索有没有现成的工具,居然要注册码,还卖45一套.你们的良心也 ...

  2. 【FFMPEG】FFMPEG介绍

    FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它包括了目前领先的音/视频编码库libavcodec. FFmpeg是在Linux下开发出来的,但它可以在包括Wi ...

  3. vscode插件Project Manager

    参考链接:https://www.jianshu.com/p/b11532b91414

  4. luogu P1216 [IOI1994][USACO1.5]数字三角形 Number Triangles (递推）

    链接:https://www.luogu.org/problemnew/show/P1216 题面: 题目描述 观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的 ...

  5. java 分解整数 【个 十 百 千】，获得个位、十位、百位数字

    求一个数数的个位数,十位数,百位数及千位: int num = 53; int g = (num / 1) % 10;  //个位 int s = (num / 10) % 10; //十位 int ...

  6. C++中如何设计一个类只能在堆或者栈上创建对象，面试题

    设计一个类,该类只能在堆上创建对象 将类的构造函数私有,拷贝构造声明成私有.防止别人调用拷贝在栈上生成对象. 提供一个静态的成员函数,在该静态成员函数中完成堆对象的创建 注意 在堆和栈上创建对象都会调 ...

  7. 机器猫css

    <html> <head>  <title>机器猫</title>  <style>   div{    width: 30px;    h ...

  8. python+selenium+webdriver+BeautifulSoup实现自动登录

    from selenium import webdriverimport timefrom bs4 import BeautifulSoupfrom urllib import requestimpo ...

  9. mydumper,myloader原理及实战

    mydumper 特性 (1)多线程备份(和mysqlpump的多线程不同,mysqlpump多线程备份的粒度是表,mydumper多线程备份的粒度是行,这对于备份大表特别有用)(2)因为是多线程逻辑 ...

  10. 使用X.509数字证书加密解密实务（二）-- 使用RSA证书加密敏感数据

    一.  使用RSA证书加.解密敏感数据 X.509证书标准支持三种不对称加密算法:RSA, DSA, Diffie-Hellman algorithms.最常用的是RSA算法.所以本文就以前面章节使用 ...