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 ...
随机推荐
- git 还原某个文件到特定版本
1.先使用 git log 查看需要还原的版本号 2.git checkout <版本号> <文件相对路径> 3.git commit -m "xxx"
- for程序员:这些你可能遇到的职场难题,我们帮你整理好了答案
“迷茫”是当下青年谈论的最多的词汇之一,无论高矮胖瘦富穷美丑,每个人都有自己独特的难题.造成“迷茫”的原因有很多种,比如生存压力,情感问题,以及困扰着相当一部分人的职场焦虑.今天这篇关于“职场迷茫”的 ...
- kvm虚拟机配置被克隆rhel6客户机的网卡
例子:配置被克隆rhel6客户机的网卡 rhel6的网卡是通过udev规则来进行命名每个网卡都有不一样的macudev规则是根据网卡的mac来进行识别克隆出来的客户机,为了遵守每个网卡的mac都是全球 ...
- 760A 水
LINK 第一天单独一行 其余7天一行 问某月有多少行 ...... /** @Date : 2017-04-02-21.35 * @Author : Lweleth (SoungEarlf@gmai ...
- PAT 1009. Triple Inversions (35) 数状数组
Given a list of N integers A1, A2, A3,...AN, there's a famous problem to count the number of inversi ...
- CSS 字体常用属性
一.字体大小 font-size:参数 /** * 参数:一.数字固定值,如20px * 二.父元素字体的百分比 * 三.smaller 比父元素更小 * 四.larger 比父元素更大 * 五.i ...
- 【BZOJ】1711: [Usaco2007 Open]Dining吃饭
[算法]最大流 [题解] S连向食物连向牛连向牛‘连向饮料连向T. 经典的一个元素依赖于两个元素的建图方式. #include<cstdio> #include<algorithm& ...
- 关于linux下crontab mysql备份出来的数据为0字节的问题
问题出在计划任务所执行的脚本上! 脚本中的调用的指令应该都写全路径~ 实例: # crontab -c 编辑下的内容 30 18 * * * /root/backup.sh 意思为:每天18:30执行 ...
- [ JS 进阶 ] 闭包,作用域链,垃圾回收,内存泄露
原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --< ...
- itext 生成pdf文件添加页眉页脚
原文来自:https://www.cnblogs.com/joann/p/5511905.html 我只是记录所有jar版本,由于版本冲突及不兼容很让人头疼的,一共需要5个jar, 其中itextpd ...