JS 双向数据绑定、单项数据绑定
2024-10-16 07:58:59
简单的双向数据绑定
<!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>
最新文章
- iframe高度自适应（同域）
- js严格模式总结
- ecshop后台分页浅析
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
- 七个结构模式之享元模式(Flyweight Pattern)
- Dynamics AX 2012 R2 RemoteApp导出项目报错
- php-fpm.conf 重要参数 max_children 和 request_terminate_timeout(转)
- linux centos5.7(32bit) oracle 10g oracle11g
- Oracle 11g新特性invisible index(不可见的索引)
- 通过select选项动态异步加载内容
- 举例android项目中的string.xml出现这个The character reference must end with the ';' delimiter.错误提示的原因及解决办法
- tomcat-jQ-springMVC-bootstrap
- keyboard splitting bug on ipad with ios 5 and 6 (Cocos2d-x)
- docker~大叔对术语的解释
- C++ STL vector详解
- java.lang.IllegalArgumentException异常 返回值类型的问题
- JS 设计模式五 -- 命令模式
- css解决图片拉伸问题
- Java 高级框架——Mybatis（一）
- Python之路(第三十二篇) 网络编程：udp套接字、简单文件传输