码迷,mamicode.com
首页 > Web开发 > 详细

原生js实现数据单向绑定

时间:2017-06-24 16:15:49      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:修改   span   访问   target   var   https   javascrip   mozilla   ext   

Object.defineProperty()方法直接在对象上定义一个新属性,或修改对象上的现有属性,并返回该对象。

Object.defineProperty(obj, prop, descriptor)

参数

  obj 定义属性的对象。
  prop 要定义或修改的属性的名称。

  descriptor 定义或修改属性的描述符。

  返回值 传递给函数的对象。
注意:数据描述符和访问器描述符,不能同时存在(value,writable 和 get,set)

  get:函数return将被用作属性的值。

  set:该函数将仅接收参数赋值给该属性的新值。(在属性改变时调用)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>*<input type="text" id="cc"/>
<span id="bb">{{hello}}</span>

<script>
var obj = {};
Object.defineProperty(obj,‘hello‘,{
enumerable: true,
configurable: true,
get: function() { return document.getElementById(‘aa‘).value; },
set:function(val){
document.getElementById(‘bb‘).innerHTML = val*obj.hello2;
}
});
Object.defineProperty(obj,‘hello2‘,{
enumerable: true,
configurable: true,
get: function() { return document.getElementById(‘cc‘).value; },
set:function(val){
document.getElementById(‘bb‘).innerHTML = val*obj.hello;
}
});
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>

原生js实现数据单向绑定

标签:修改   span   访问   target   var   https   javascrip   mozilla   ext   

原文地址:http://www.cnblogs.com/gxp69/p/7073415.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!