Javascript实现双向绑定

最新推荐文章于 2025-05-03 09:07:35 发布

孤身不觉晚

最新推荐文章于 2025-05-03 09:07:35 发布

阅读量135

点赞数

本文链接：https://blog.youkuaiyun.com/qq_40043424/article/details/104428412

版权

此方法借助Object.defineProperty进行数据劫持，利用了对象属性描述符中的存取描述符实现的数据双向绑定：

<body>
	<div class="content">
		<input type="text" name="txt" id="txt" value="" />
		<h1 id="h1"></h1>
	</div>
</body>

	window.onload = ()=> {
		const obj = {};
		Object.defineProperty(obj,'text',{
			get(){
			return text	
			},
			set(newVal){
				document.getElementById('txt').value = newVal;
				document.getElementById('h1').innerHTML = newVal;
			}
		});
		let inp = document.getElementById('txt');
		inp.addEventListener('keyup',(e)=>{
			obj.text = e.target.value;
		})
	}