HTML 页面双向绑定实现：Object.defineProperty() 方法详解

双向绑定是指当一个数据发生变化时，视图也会随之更新，反之视图发生变化时，数据也会被更新。在 HTML 页面中，我们可以使用 Object.defineProperty() 方法来实现双向绑定。

以下是一个示例代码，实现了一个简单的双向绑定：

<!DOCTYPE html>
<html>
<head>
	<title>双向绑定示例</title>
</head>
<body>
	<label>输入名字：</label>
	<input id='nameInput' type='text'>

	<p>你好，<span id='nameOutput'></span>！</p>

	<script>
		// 定义数据对象
		let data = {
			name: ''
		};

		// 获取输入框和输出框的元素
		let nameInput = document.getElementById('nameInput');
		let nameOutput = document.getElementById('nameOutput');

		// 使用 Object.defineProperty() 方法实现双向绑定
		Object.defineProperty(data, 'name', {
			get: function() {
				return nameInput.value;
			},
			set: function(newValue) {
				nameOutput.innerText = newValue;
				nameInput.value = newValue;
			}
		});

		// 监听输入框的变化，更新数据对象
		nameInput.addEventListener('input', function(event) {
			data.name = event.target.value;
		});

	</script>
</body>
</html>

在这个示例中，我们首先定义了一个数据对象 data，它包含一个名为 name 的属性。然后，我们获取了输入框和输出框的元素，并使用 Object.defineProperty() 方法为 data.name 属性定义了 get 和 set 方法。get 方法返回输入框的值，set 方法将新值设置为输出框和输入框的值，并且在设置新值时触发了视图更新。最后，我们使用 addEventListener() 方法监听输入框的变化，当输入框的值发生变化时，将新值更新到数据对象中。

通过以上代码，我们成功地实现了数据的双向绑定，当输入框的值发生变化时，输出框的值也会随之更新，反之亦然。

HTML 页面双向绑定实现：Object.defineProperty() 方法详解