原生js,简单的数据单项绑定技术,超级棒

讨论 未结
3 319
微秀
微秀 2017-12-1
悬赏:20飞吻
之前想做单项或者双向的数据绑定,需要用前端框架,感觉太臃肿~~原来原生js做数据绑定如此简单,代码如下:
<!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>
回帖
本帖已设置禁止回复