码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现数据的双向绑定

时间:2018-04-20 16:04:17      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:UNC   text   ntb   debug   数据   color   ext   meta   get   

接触到Angulr.js和Vue.js后,提到最多的就是双向绑定

下面将用JavaScript实现数据的双向绑定

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <input type="text" id="foo" value="as"/>
</body>
<script type="text/javascript"> 
function bindModelInput(obj, property, domElem) {
  Object.defineProperty(obj, property, {
    get: function() {
        return domElem.value; 
    }, 
    set: function(newValue) {
        debugger;
        domElem.value = newValue; 
    },
    configurable: true
  });
}
user = {};
var inputElem = document.getElementById("foo");
bindModelInput(user,‘name‘,inputElem);
debugger;
user.name = "Joe";
alert("input value is now "+inputElem.value) //input元素现在的值是‘Joe‘
inputElem.value = ‘Bob‘;
alert("user.name is now "+user.name) //现在model中的value是Bob
</script>
</html>

 

JavaScript实现数据的双向绑定

标签:UNC   text   ntb   debug   数据   color   ext   meta   get   

原文地址:https://www.cnblogs.com/zyxiaohuihui/p/8890867.html

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