es6的set和get实现数据双向绑定,监听变量变化。
直接上代码吧,这个用法真的是效仿了.net的枚举。
vue的数据双向绑定就是用这个实现的。
代码:
html:
<input type="text" id="input1">
<input type="text" id="input2">
我每次比input1的值加1=>
<span id="span"></span> js:
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oSpan = document.getElementById('span');
var obj = {};
Object.defineProperties(obj, {
val1: {
configurable: true,
get: function() {
oInput1.value = 0;
oInput2.value = 0;
oSpan.innerHTML = 0;
return 0
},
set: function(newValue) {
oInput2.value = newValue;
oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0
}
},
val2: {
configurable: true,
get: function() {
oInput1.value = 0;
oInput2.value = 0;
oSpan.innerHTML = 0;
return 0
},
set: function(newValue) {
oInput1.value = newValue;
oSpan.innerHTML = Number(newValue)+1;
}
}
})
oInput1.value = obj.val1;
oInput1.addEventListener('keyup', function() {
obj.val1 = oInput1.value;
}, false);
oInput2.addEventListener('keyup', function() {
obj.val2 = oInput2.value;
}, false);
监听变量值变化,数据双向绑定:
html:
<button onclick="plus()"> + </button>
<p id="p">0</p>
js:
function plus() {
watchVal.val = ++watchVal.value;
var screen = document.getElementById('p');
var text='00';
text=watchVal.value;
screen.innerHTML = text;
console.log(watchVal.value)
}
var watchVal = {
value: 0,
get val() {
console.log('取值', this.value);
return this.value;
},
set val(vals) {
this.value = vals;
console.log('存过后的值', this.value);
}
}
【未完待续,后续我封装一个自己的插件哦~】
es6的set和get实现数据双向绑定,监听变量变化。的更多相关文章
- vuejs数据双向绑定原理(get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- 深入理解Proxy 及 使用Proxy实现vue数据双向绑定
阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- Vue数据双向绑定探究
前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
随机推荐
- CDOJ--1237
原体连接:http://acm.uestc.edu.cn/problem.php?pid=1237 分析:质因子单增:在寻找下一个质因子时,从前一个开始. #include<iostream&g ...
- thinkphp框架中Model对象$origin对象的作用
在Model的构造函数中,$origin的初始化方式如下 if (is_object($data)) { $this->data = get_object_vars($data); } else ...
- linux的进程1:rootfs与linuxrc
在内核启动的最后阶段启动了三个进程 进程0:进程0其实就是刚才讲过的idle进程,叫空闲进程,也就是死循环.进程1:kernel_init函数就是进程1,这个进程被称为init进程.进程2:kthre ...
- ASP.NET网站伪静态下使用中文URL
首先解释一下,什么是中文URL呢?它并不是我们常见的把汉字编码为 %CF%EC 这种形式,而是在URL中直接使用汉字 这种形式目前还不是很多见.因为不同的浏览器处理起来可能会有所不同,不过据我测试,I ...
- Spring websocket浏览器连接时出现404错误
1.场景 在用websocket做一个简单的数据导入页面同步显示后台进度功能的时候,浏览器出现连接不上的错误: WebSocket connection to 'ws://localhost:8080 ...
- 【BZOJ】3992: [SDOI2015]序列统计 NTT+生成函数
[题意]给定一个[0,m-1]范围内的数字集合S,从中选择n个数字(可重复)构成序列.给定x,求序列所有数字乘积%m后为x的序列方案数%1004535809.1<=n<=10^9,3< ...
- pip install bs4安装失败
使用管理员方式打开命令提示符框,然后pip install bs4即可安装成功:
- hibernate CasCade deleted object ould be re-saved by cascade
这个问题个人认为看你用的那种方式,如果是注解式的 比如: @ManyToMany(cascade={CascadeType.MERGE,CascadeType.REFRESH,CascadeType. ...
- Java并发编程(二)
1.Lock接口 在Lock接口出现之前,Java程序是靠synchronized关键字实 ...
- Xcode 9安装
Xcode 9 Xcode 9 Compatibility Xcode 9 requires a Mac running macOS 10.13.2 or later. Xcode 9 include ...