接触到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. 【ARM-Linux开发】打包解包命令

    tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...

  2. solr的使用

    一,下载,安装 https://lucene.apache.org/solr/ 二, mac下使用 下载二进制包后,解压 step 1 进入solr目录: cd solr-8.2.0 step 2 进 ...

  3. linux文本处理三剑客（一）---grep

    在linux种有一句话,叫做一切皆文件.文件有个特点,它是个文本.它可以读.可以写,如果是二进制文件,它还能执行.这样的话,我们在使用linux的时候,多数时间都是要和各式各样文件打交道的.那么,熟悉 ...

  4. RestTemplate实践（及遇到的问题）

    在微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnection.Apache的Http Client.Netty的异步 ...

  5. （八）动态 sql

    目录 什么是动态 sql sql 片段 foreach 标签 什么是动态 sql 我们之前在映射文件中,配置 sql 的时候,其实都是静态的 : <!--复杂查询--> <selec ...

  6. javaSE 笔记一

    java 环境变量配置 步骤:   右键[计算机]图标 –>[属性]–>[高级系统设置]–>[环境变量]   在"系统变量"里找到"Path" ...

  7. 整体二分（模板二）动态区间第K大

    这才是更一般的二分写法--HDU5412 #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <cstdio>// ...

  8. 第10章：深入浅出Ansible

    1.Ansible介绍 1).Ansible的优点 Ansible是一个简单的自动化引擎,可完成配置管理.引用部署.服务编排以及其他各种IT需求 Ansible是Python开发并实现的开源软件,其依 ...

  9. k8s-prometheus 数据采集(node redis kubelet等)

    apiVersion: v1 kind: ConfigMap metadata: name: prometheus-config namespace: kube-ops data: prometheu ...

  10. 初识机器学习——概念介绍（imooc笔记）

    前言 imooc的机器学习一个最基本的介绍类课程,http://www.imooc.com/learn/717 ,不怎么涉及具体的算法或实现,只是讲了讲一些理论概念. 概述 机器学习: 利用计算机从历 ...