JavaScript实现数据的双向绑定

Posted 2020-10-31 取什么昵称呢

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现数据的双向绑定相关的知识，希望对你有一定的参考价值。

接触到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实现数据的双向绑定的主要内容，如果未能解决你的问题，请参考以下文章

如何初始化片段中的绑定属性以使双向数据绑定工作

Vue2从入门到精通详解Vue数据双向绑定原理及手动实现双向绑定

JavaScript实现简单的双向数据绑定（EmberAngularVue）

剖析Vue原理&实现双向绑定MVVM