直接上代码吧,这个用法真的是效仿了.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--1237

    原体连接:http://acm.uestc.edu.cn/problem.php?pid=1237 分析:质因子单增:在寻找下一个质因子时,从前一个开始. #include<iostream&g ...

  2. thinkphp框架中Model对象$origin对象的作用

    在Model的构造函数中,$origin的初始化方式如下 if (is_object($data)) { $this->data = get_object_vars($data); } else ...

  3. linux的进程1:rootfs与linuxrc

    在内核启动的最后阶段启动了三个进程 进程0:进程0其实就是刚才讲过的idle进程,叫空闲进程,也就是死循环.进程1:kernel_init函数就是进程1,这个进程被称为init进程.进程2:kthre ...

  4. ASP.NET网站伪静态下使用中文URL

    首先解释一下,什么是中文URL呢?它并不是我们常见的把汉字编码为 %CF%EC 这种形式,而是在URL中直接使用汉字 这种形式目前还不是很多见.因为不同的浏览器处理起来可能会有所不同,不过据我测试,I ...

  5. Spring websocket浏览器连接时出现404错误

    1.场景 在用websocket做一个简单的数据导入页面同步显示后台进度功能的时候,浏览器出现连接不上的错误: WebSocket connection to 'ws://localhost:8080 ...

  6. 【BZOJ】3992: [SDOI2015]序列统计 NTT+生成函数

    [题意]给定一个[0,m-1]范围内的数字集合S,从中选择n个数字(可重复)构成序列.给定x,求序列所有数字乘积%m后为x的序列方案数%1004535809.1<=n<=10^9,3< ...

  7. pip install bs4安装失败

    使用管理员方式打开命令提示符框,然后pip install bs4即可安装成功:

  8. hibernate CasCade deleted object ould be re-saved by cascade

    这个问题个人认为看你用的那种方式,如果是注解式的 比如: @ManyToMany(cascade={CascadeType.MERGE,CascadeType.REFRESH,CascadeType. ...

  9. Java并发编程(二)

    1.Lock接口                                                        在Lock接口出现之前,Java程序是靠synchronized关键字实 ...

  10. Xcode 9安装

    Xcode 9 Xcode 9 Compatibility Xcode 9 requires a Mac running macOS 10.13.2 or later. Xcode 9 include ...