版权声明:哼!坏人!这是我辛辛苦苦码的! https://blog.csdn.net/DurianPudding/article/details/88199542
现在框架都可以实现双向绑定,vue中实现双向绑定的原理是利用Object.defineProperty
定义访问器属性要使用Object.defineProperty
,接收三个参数:属性所在的对象,属性的名字,一个描述符对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
<script>
var obj = {};
// obj为content属性所在的对象,content为obj对象的属性
// get 读取访问器属性返回有效的值;set 传入新值
Object.defineProperty(obj, 'content', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
});
// keyup 键被松开
document.addEventListener('keyup', function (e) {
// 通过监听keyup事件,用目标值为obj.content赋值
obj.content = e.target.value
});
</script>
</body>
</html>