简单的实现一个数据的双向绑定

最新推荐文章于 2024-04-04 19:13:32 发布

大魔王丫丫

最新推荐文章于 2024-04-04 19:13:32 发布

阅读量673

点赞数 1

分类专栏：数据双向绑定文章标签： vue

本文链接：https://blog.csdn.net/weixin_48882471/article/details/115972564

版权

数据双向绑定专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue数据的双向绑定是通过Object.defineProperty来实现,今天我就来写一个简单的数据绑定,废话不多说,上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="text" id="input" onchange="inputChange" />
		<h2 id="h2"></h2>
		

	</body>
</html>
<script>
	let data = {}
	Object.defineProperty(data, "a", {
		set: newVal => {
			document.getElementById('input').value = newVal
			document.getElementById('h2').innerHTML = newVal
		}
	})
	document.getElementById('input').onkeyup=function(e){
		 data.a=e.target.value
	};
	data.a=""
	
	
</script>

在这里插入图片描述

这是一个比较简单的数据绑定,后续在为大家来一个完整版的,

如果你看到这篇文章,麻烦动一动您的金手指,点个赞关注一下再走

最后祝各位码友身体健康,恭喜发财,

大魔王丫丫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
简单的实现一个数据的双向绑定

Vue数据的双向绑定是通过Object.defineProperty来实现,今天我就来写一个简单的数据绑定,废话不多说,上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="text" id="input" onchange="inputC
复制链接

扫一扫