直接上代码吧,这个用法真的是效仿了.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实现数据双向绑定,监听变量变化。的更多相关文章

  1. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  2. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  3. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  4. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  5. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  6. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  7. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  8. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  9. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

随机推荐

  1. CDOJ--1404

    原题链接:http://acm.uestc.edu.cn/problem.php?pid=1404 分析:定义dp[i][j]表示i位时最左边为j时的情况,那么dp[i][[j]可以由dp[i-1][ ...

  2. Qt ------ 我定义的规则 之 对象命名规则

    类型 + 特性,比如  button_closeLigth 非公有的变量前面要加上小写m_ (指的修饰符为private时) 静态变量前面加上小写s_ 其它变量以小写字母开头 静态变量全大写 (sta ...

  3. Asp.net mvc 大文件上传 断点续传 进度条

    概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这篇文章,此方法确实很不错,能够稳定的上传大文件,http: ...

  4. [LeetCode] 30. Substring with Concatenation of All Words ☆☆☆

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  5. NOIP模拟7

    期望得分:100+100+20=220 实际得分:100+95+20=215 T1 洛谷 P1306 斐波那契公约数 #include<cstdio> #include<cstrin ...

  6. CF821 C. Okabe and Boxes 栈模拟

    Link 题意:给出操作,如果当前出栈操作使得出栈序列非顺序,可以在此之前自由排序栈中所有数,问最少排几次. 思路:已经出栈到第x个元素时,每次需要排序的操作后,能够保证前x元素出栈有序,否则说明该操 ...

  7. 重构改善既有代码设计--重构手法09:Substitute Algorithm (替换算法)

    你想要把某个算法替换为另一个更清晰地算法.将函数本体替换为另一个算法. string FoundPerson(string[] people) { for (int i = 0; i < peo ...

  8. 51nod1471 小S的兴趣

    题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 320 小S喜欢有趣的事.但是,每个人的兴趣都是独特的.小S热衷于自问自答.有一天,小S想出了一个问题 ...

  9. 【BZOJ】3771: Triple FTT+生成函数

    [题意]给定n个物品,价值为$a_i$,物品价格互不相同,求选一个或两个或三个的价值为x的方案数,输出所有存在的x和对应方案数.$ai<=40000$. [算法]生成函数+FFT [题解]要求价 ...

  10. 实验吧CTF题库之二叉树遍历

    题目链接:http://www.shiyanbar.com/ctf/1868 直接推算出来这棵树是: 后序遍历是:ACBFGED 参考资料: 1. http://www.shiyanbar.com/c ...