接触到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. A+B Problem Plus and A-B Problem Plus and A*B Problem Plus

    //we have defined the necessary header files here for this problem. //If additional header files are ...

  2. docker安装mongodb和redis

    一.安装mongodb docker pull mongo docker run -p 27017:27017 -d --name mongodb01 mongo docker run -p 2701 ...

  3. 使用Dockerfile创建ssh服务的镜像02

    使用Dockerfile创建ssh服务的镜像02 1:创建工作目录---一个镜像的所有文件都放这个目录下 ubuntu@ubuntu:~$ mkdir sshd_ubuntu ubuntu@ubunt ...

  4. poj3977（折半枚举+二分查找）

    题目链接:https://vjudge.net/problem/POJ-3977 题意:给一个大小<=35的集合,找一个非空子集合,使得子集合元素和的绝对值最小,如果有多个这样的集合,找元素个数 ...

  5. IDEA插件之JProfiler

    1.是什么?来用干嘛的? 一个商业授权的Java剖析工具. 用来剖析程序内存.CPU使用情况,找到性能瓶颈,快速定位问题所在. 2.IDEA安装JProfiler插件 (1)File -> Se ...

  6. Kubernetes---启动及退出动作

    apiVersion: v1 kind: Pod metadata: name: lifecycle-demo spec: containers: - name:lifecycle-demo-cont ...

  7. 并不对劲的CF1236D&E：Alice&Doll&UnfairGame

    CF1236D Alice&Doll 题目描述 有一个机器人在一个\(n\times m\)的有\(k\)个障碍网格上移动,上北下南左西右东. 它一开始在第一行第一列,面朝东边.它在每个格子上 ...

  8. docker 入门2 - 容器 【翻译】

    入门,第 2 部分:容器 先决条件 安装的 Docker 版本是 1.13 及以上. 读完 第一部分 用下面的命令快速测试你的环境是否完备: docker run hello-world 概述 现在开 ...

  9. 怎样创建一个独立于当前文档的新的Document对象

    使用: document.implementation. 如下所示, 新创建的Document对象可以正常使用相关属性和方法, 然后将它的根节点与当前文档的根节点做一个替换. var doc = do ...

  10. [Tarjan系列] Tarjan算法求无向图的双连通分量

    这篇介绍如何用Tarjan算法求Double Connected Component,即双连通分量. 双联通分量包括点双连通分量v-DCC和边连通分量e-DCC. 若一张无向连通图不存在割点,则称它为 ...