手写数据双向绑定

最新推荐文章于 2024-02-25 20:15:01 发布

皮小猪老师

最新推荐文章于 2024-02-25 20:15:01 发布

阅读量138

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_38613687/article/details/129361247

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="input">
		<span id="span"></span>
	</body>
</html>
<script>
	let obj = {}
	let input = document.getElementById('input')
	let span = document.getElementById('span')
	// 数据劫持
	Object.defineProperty(obj, 'text', {
		configurable: true,
		enumerable: true,
		get() {
			console.log('获取数据了')
		},
		set(newVal) {
			console.log('数据更新了')
			input.value = newVal
			span.innerHTML = newVal
		}
	})
	// 输入监听
	input.addEventListener('keyup', function(e) {
		obj.text = e.target.value
	})
</script>