原生js实现双向数据绑定
一、两个model之间的双向绑定
var o = {
a: 0
}
o.b = o.a + 1;
console.log(o.a); // "0"
console.log(o.b); // "1"
//更新o.a
o.a = 5;
o.b = o.a + 1;
console.log(o.a); // "5"
console.log(o.b); // "6"
//更新o.b
o.b = 10;
o.a = o.b / 5;
o.b = o.a + 1;
console.log(o.a); // "2"
console.log(o.b); // "3"
var o = {
a: 0
}
Object.defineProperty(o, "b", {
get: function () {
return this.a + 1;
},
set: function (value) {
this.a = value / 5;
}
});
console.log(o.a); // "0"
console.log(o.b); // "1"
// 更新o.a
o.a = 5;
console.log(o.a); // "5"
console.log(o.b); // "6"
// 更新o.b
o.b = 10;
console.log(o.a); // "2"
console.log(o.b); // "3"
二、model和view之间的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现数据双向绑定</title>
</head>
<body>
<input type="text" id="J_input">
<script>
//数据层Model
var dataObj = {
nkey:'camille'
}
//视图层view
var J_input = document.getElementById('J_input');
//逻辑层viewModel
function manualBind(nkey,nvalue){
dataObj.nkey = nvalue;
J_input.value = nvalue;//属性设置
//J_input.setAttribute('value',nvalue);会直接在dom中看到属性，属于添加属性的方法。
}
/**
* 功能：改变view，更新model
* 测试方法：在文本框输入不同内容，在控制台打印dataObj.nkey，即可看到dataObj.nkey最新值。
*/
J_input.addEventListener('keyup',function(e){
manualBind('nkey',e.target.value);
},false);
/**
* 功能：改变model，更新view
* 测试方法：
* 1、在控制台写dataObj.nkey = 'username';并手动调用manualBind('nkey',dataObj.nkey);
* 2、打印document.getElementById('J_input').value;即可看到view层的变化。
*/
// manualBind('nkey','camille666');
</script>
</body>
</html>
原生js实现双向数据绑定的更多相关文章
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- js实现一个简单的响应式双向数据绑定
一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- JS 双向数据绑定、单项数据绑定
简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
随机推荐
- [Nmap] Regular script
out of date: TCP:nmap.exe -sC -sS -sV -p 1-65535 -A -v -v -oX filename.xml ip UDP:nmap.exe -sC -sU - ...
- 这可能是最为详细的Docker入门吐血总结
这可能是最为详细的Docker入门吐血总结 https://www.cnblogs.com/ECJTUACM-873284962/p/9789130.html Docker是什么? 在计算机技术日新 ...
- zsh fg: no job control in this shell.
图片的上面就是将一个应用按Ctrl+Z,把任务放到后台里面.没法fg将任务回到前台运行. 在.zshrc中添加set -m. 具体原因不明.我切换到root用户里,没有出现这个问题.将我的.zshrc ...
- <二>ELK-6.5.3学习笔记–使用rsyslog传输管理nginx日志
http://www.eryajf.net/2362.html 转载于 本文预计阅读时间 28 分钟 文章目录[隐藏] 1,nginx日志json化. 2,发送端配置. 3,接收端配置. 4,配置lo ...
- Web of science数据下载以数据处理
目标网站分析 我们要获取的就是这几个数值 程序实现 # -*- coding: utf-8 -*- """ @Datetime: 2019/2/28 @Author: Z ...
- html - 表单form
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
- SpringBoot系列: 使用 consul 作为服务注册组件
本文基本上摘自纯洁的微笑的博客 http://www.ityouknow.com/springcloud/2018/07/20/spring-cloud-consul.html . 感谢作者的付出. ...
- H5取经之路——添加hover实现特定效果
一.鼠标指上后显示二维码,效果图如下: 鼠标未指上时: 鼠标指上后: 代码如下: .div1 .li2 .code_wexin{ width: 0px; height: 0px; position: ...
- Django之Xadmin
零.预备知识 单例对象 方式一:__new__方法 方式二:模块导入,只要在引入的文件中实例了这个对象,不管引道哪里,这个对象都指向同一个内存空间 class My_singleton(object) ...
- HBSX2019 游记
Day -4 训练戳SX2019 3月训练 ZJOI2019 Day1几天前就考了 T1真考了麻将QwQ 九条可怜的毒瘤真的是业界良心 今天中午才起,要开始调整生物钟了 9012HBOIers群里讨论 ...