JavaScript实现数据的双向绑定
接触到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实现数据的双向绑定的更多相关文章
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- 数据的双向绑定 Angular JS之开端篇
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- AnjularJS系列3 —— 数据的双向绑定
第三篇,双向的数据绑定 数据绑定是AnguarJS的特性之一,避免书写大量的初始代码从而节约开发时间 数据绑定指令提供了你的Model投射到view的方法.这些投射可以无缝的,毫不影响的应用到web应 ...
随机推荐
- MyBatis使用技巧、总结、注意事项
目录 1.mybatis的官方文档地址 2.其他技巧: 2.1 如何在代码中拼接 like %% 2.2 数据库比较时日期的错误操作 2.2.1 异常情况: 2.2.2 为什么会在后面指定jdbcTy ...
- 最新 昆仑万维java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.昆仑万维等10家互联网公司的校招Offer,因为某些自身原因最终选择了昆仑万维.6.7月主要是做系统复习.项目复盘.Leet ...
- nginx 开启gzip压缩
Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度,! Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于 ...
- 正确理解使用Vue里的nextTick方法
最近,在项目中要使用Swiper做一个移动端轮播插件.需要先异步动态加载数据后,然后使用v-for渲染节点,再执行插件的滑动轮播行为.解决这个问题,我们通过在组件中使用vm.$nextTick来解决这 ...
- ubuntu中配置ip地址和上网配置
ubuntu中的ip地址配置: 基于NAT模式: 如果能正常连接ip,但不能ping动www.baidu.com的话,我们需要在配置文件中配置主机上网的DNS地址,如下: 如果上面图片上的DNS se ...
- php实现算法
二分法查找(已排序) @params $arr 查找的数组 $start 开始查找的下标 $end 结束查找的下标 $value 查找的值 function bin_search($arr,$ ...
- Idea中maven的设置
File->setting 输入MAVEN 看到右侧设置情况 Maven home directory 熟路本地moven 仓库目录:D:/springboot/apach ...
- 【数据结构】P1054 等价表达式
[题目链接] https://www.luogu.org/problem/P1054 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数 ...
- Mysql数据库的优化（本文摘自于网络，文章末端有原文链接）
对于一个以数据为中心的应用,数据库的好坏直接影响到程序的性能,因此数据库性能至关重要.一 般来说,要保证数据库的效率,要做好以下四个方面的工作: ① 数据库设计 ② sql语句优化 ③ 数据库参数配置 ...
- sql游标循环
DECLARE @begindate DATETIME=CONVERT(DATETIME, '2019.05.06 09:40:50') ,@enddate DATETIME =GETDATE() , ...