整理自《如何用javascript实现双向数据绑定》。
为了实现这个功能我们需要用到js的一个方法Object.defineProperty
。
1. 属性介绍
语法:
Object.defineProperty(obj,prop,descriptor);
-
描述:
-
obj
:必需。目标对象 -
prop
:必需。需定义或修改的属性的名字 -
descriptor
:必需。目标属性所拥有的特性
-
-
用法:
var demo = { name: 'json' }; Object.defineProperty(demo, 'name', { value: 'jack', writable: true }) //更改demo的name属性值 demo.name = 'mike'; //查看name属性 demo.name // 输出mike //小结:value: 设置属性的值 // writable: 值是否可以重写。 true | false // 如果var demo = {}; 则上述方法就会为该对象添加一个name属性并给其赋值
2. 方法介绍(就直接上完整例子了)
<html>
<body>
<input id="userName" style="border: 3px solid #999;" oninput="modelToView(this.value)" />
<label id="userNameTo" style="border: 3px solid #999;"></label>
<script type="text/javascript">
var inputObj = document.getElementById('userName');
var showObj = document.getElementById('userNameTo');
var model = new Object(null);
Object.defineProperty(model, 'user', {
set: function (value) {
showObj.innerHTML = value;
user = value;
},
get: function () {
return user;
}
})
function modelToView() {
model['user'] = inputObj.value
}
</script>
</body>
</html>
label
中的内容会随着input
的value
变化而改变。