简单实现VUE的双向数据绑定

最新推荐文章于 2025-12-04 17:39:28 发布

转载最新推荐文章于 2025-12-04 17:39:28 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maggie-pan/p/10025803.html

文章标签：

#javascript #ViewUI

本文通过一个简单的HTML页面示例，展示了如何使用Vue.js的原理实现双向数据绑定。通过定义一个对象属性，并利用Object.defineProperty来监听和更新输入框与显示文本的值，实现了数据的实时同步。

<!DOCTYPE html>
<html>
<head>
	<title>vue-双向数据绑定的简单实现</title>
</head>
<body>
	<input type="text" name="" id="inputText">
	<span id='textSpan'></span>
	<script type="text/javascript">
	let obj = {},
		inputText = document.querySelector('#inputText'),
		textSpan = document.querySelector('#textSpan')
	Object.defineProperty(obj, 'foo', {
		set: function (newValue) {
			inputText.value = newValue
			textSpan.innerHTML = newValue
		}
	})
	inputText.addEventListener('keyup', function (e) {
		obj.foo = e.target.value
	})
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/maggie-pan/p/10025803.html