JS 双向数据绑定、单项数据绑定
简单的双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb" style="border: 2px solid orange;margin-left: 20px;">{{hello}}</span>
<br>
<br>
<input type="text" id="cc"/> <script>
// 双向数据绑定的原理：属性拦截
// 属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。 var obj = {};
Object.defineProperty(obj, 'hello', {
enumerable: true,
configurable: true,
get: function () {
return document.getElementById('aa').value;
},
set: function (val) {
document.getElementById('bb').innerHTML = obj.hello;
document.getElementById('cc').value = obj.hello;
}
});
Object.defineProperty(obj, 'hello2', {
enumerable: true,
configurable: true,
get: function () {
return document.getElementById('cc').value;
},
set: function (val) {
document.getElementById('aa').value = obj.hello2;
document.getElementById('bb').innerHTML = obj.hello2;
}
});
document.getElementById('aa').onkeyup = function () {
obj.hello = this.value;
};
document.getElementById('cc').onkeyup = function () {
obj.hello2 = this.value;
};
obj.hello = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来
obj.hello2 = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来
</script>
</body>
</html>
单项数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb" style="border: 2px solid orange;margin-left: 20px;">{{hello}}</span> <script>
// 双向数据绑定的原理：属性拦截
// 属性拦截实现方式 ： 使用Object.defineProperty()将对象的属性变成访问器属性。 var obj = {};
Object.defineProperty(obj, 'hello', {
enumerable: true,
configurable: true,
get: function () {
return document.getElementById('aa').value;
},
set: function (val) {
document.getElementById('bb').innerHTML = obj.hello;
}
}); document.getElementById('aa').onkeyup = function () {
obj.hello = this.value;
}; obj.hello = ""; //属性名必须设置为空，否则在使用插值表达式的时候直接会把插值表达式显示出来
</script>
</body>
</html>
JS 双向数据绑定、单项数据绑定的更多相关文章
- Angular JS - 3 - Angular JS 双向数据绑定
一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- angular-dragon-drop.js 双向数据绑定拖拽的功能
在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js ...
- Vue.js双向数据绑定模板渲染
准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> & ...
- js控制select下拉列表数据绑定
JS代码部分: <script type="text/javascript"> $(document).ready(function () { $("sel ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
- 很easy的js双向绑定框架（二）：控制器继承
初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. ...
- vue.js双向绑定之--select获取text
在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...
随机推荐
- [loj3031]聚会
对于一棵树(初始仅包含节点0),不断加入一个不在树中的节点$u$(不需要随机),并维护这棵树 具体的,对这棵树点分治,假设当前重心$v$有$d$个子树,假设其中第$i$个子树根为$r_{i}$,子树大 ...
- [loj3331]选课
考虑$P=0$,由于$T-\sum_{i=1}^{m}s_{i}\le 40$,因此一个第$i$个分类中最多得到$s_{i}+42$的学分,可以对每一类分别背包 暴力背包复杂度为$o(n^{2})$, ...
- 交叉编译环境的linaro-gdb可以用了，结果打开core文件，显示堆栈都是？？
交叉编译环境的linaro-gdb可以用了,结果打开core文件,显示堆栈都是?? aarch64-linux-gun-gdb ./test core warning: /lib/libpthread ...
- 柯基数据通过Rainbond完成云原生改造，实现离线持续交付客户
1.关于柯基数据 南京柯基数据科技有限公司成立于2015年,提供一站式全生命周期知识图谱构建和运维.智能应用服务,致力于"链接海量数据,从大数据中挖掘智慧".帮助企业运用知识 ...
- Java设计模式之（十一）——享元模式
1.什么是享元模式? Use sharing to support large numbers of fine-grained objects efficiently. 享元模式(Flyweight ...
- CF1264D1 Beautiful Bracket Sequence (easy version)
考虑在一个确定的括号序列中,我们可以枚举中间位置,按左右最长延伸出去的答案计算. 我们很自然的思考,我们直接维护左右两边,在删除一些字符后能够延伸的最长长度. 我们设\(f_{i,j}\)为\(i\) ...
- SNPEFF snp注释 (添加自己基因组)
之间介绍过annovar进行对snp注释,今天介绍snpEFF SnpEff is a variant annotation and effect prediction tool. It annota ...
- 『学了就忘』Linux文件系统管理 — 62、手动分配swap分区
目录 1.查看swap分区情况 2.手动修改swap分区 3.格式化swap分区 4.使用swap分区 5.配置swap分区开机之后自动挂载 1.查看swap分区情况 swap分区就相当于是内存的一个 ...
- C#数字验证
using System; using System.Collections; using System.Configuration; using System.Data; using System. ...
- vim文本编辑器的基本使用
vim文本编辑器的基本使用 1. vi和vim的区别和联系 可以说vim是vi的增强版,在使用vim编辑文本时,可以根据字体颜色来判断编写程序的正确性. 2. vim文本编辑器的常用命令 1. 编辑指 ...