vue实现数据双向绑定原理实现

最新推荐文章于 2024-07-31 23:47:49 发布

怒放的生命1991

最新推荐文章于 2024-07-31 23:47:49 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/qq_34507902/article/details/90342153

版权

直接上代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<input type="text" id="userName">
	<span id="uName"></span>
</body>
</html>
<script>
 var obj={};
 const inputIdEle=document.getElementById('userName');
 // Object.defineProperty设置对象属性的
 Object.defineProperty(obj,'uName',{
	 set:function(val){
		 console.log('set init');
		 inputIdEle.value=val;
		 document.getElementById('uName').innerHTML=val;
	 },
	 get:function(){
		 console.log('get init');
	 },
 })
 //通过键盘事件可以把input value值给到对象 这个时候对象的 set方法触发然后赋值给到span
	  inputIdEle.addEventListener('keyup',function(event){
			   obj.uName=event.target.value;
		 })
</script>