接触到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. 静态路由、RIP、OSPF、BGP

      主要内容包含以下四点:(1)静态路由 (2)动态路由 (3)生成树 (4)VLAN 1.  什么是静态路由? 答:静态路由是管理人员手动配置和管理的路由 2.  静态路由由那些优点? 答:配置简单 ...

  2. Web应用搭建

    Web应用搭建 *资料库 http://www.oschina.net/project/tag/308/server-suite * web环境 http://www.freebuf.com/tool ...

  3. react新特性hook

    一.hook示例.   import React, { useState } from 'react'; function Example() { // 声明一个叫 “count” 的 state 变 ...

  4. BIO和NIO实现文件复制

    普通文件复制 public void copyFile() throws Exception{ FileInputStream fis=new FileInputStream("C:\\Us ...

  5. AMD全新32核线程撕裂者GeekBench跑分曝光：超2950X近一倍

    AMD全新32核线程撕裂者GeekBench跑分曝光:超2950X近一倍 2019年09月01日 09:36 1109 次阅读 稿源:快科技 1 条评论 https://www.cnbeta.com/ ...

  6. SQL 十位随机数（大小写字母+数据）

    USE [TEST]GO/****** Object: UserDefinedFunction [dbo].[RANDTENNUMS] Script Date: 2019/7/23 15:40:16 ...

  7. 【51nod】2564 格子染色

    [51nod]2564 格子染色 这道题原来是网络流-- 感觉我网络流水平不行-- 这种只有两种选择的可以源点向该点连一条容量为b的边,该点向汇点连一条容量为w的边,如果割掉了b证明选w,如果割掉了w ...

  8. python学习-6 猜拳小游戏

    import random # 调用随机数模块 pc = random.randint(1,3) # 产生1-3的随机数 print("来玩个猜拳游戏吧!") a = '石头' b ...

  9. vue页面顺序规范

    // html模板<template>    <div>因联vue页面规范</div></template><script>   // 模块 ...

  10. 怎样监听HTTP请求的发出与完成

    1. 监听HTTP请求发出的事件是: xhr.onloadstart 2. 监听HTTP请求结束的事件是: xhr.onloadend xhr.onloadstart = function() { / ...