vue如何实现数据的双向绑定

最新推荐文章于 2025-06-04 14:47:51 发布

梦颖飞燕

最新推荐文章于 2025-06-04 14:47:51 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/sinat_27346451/article/details/78428566

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript的Object.defineProperty方法实现输入框与页面元素之间的双向数据绑定。当用户在输入框中输入文本时，页面上的另一个元素会实时更新显示相同的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <input type="text" id="a"/>
 <span id="b"></span>
  <script type="text/javascript">
	var obj = {};
	Object.defineProperty(obj,'hello',{
		set:function(newVal){
			document.getElementById('a').value = newVal;
			document.getElementById('b').innerHTML = newVal;
		}
	});
	document.addEventListener('keyup',function(e){
		obj.hello = e.target.value;
		//target 事件属性可返回事件的目标节点（获得触发事件的元素），如生成事件的元素、文档或窗口。
	})
  </script>
 </body>
</html>