使用js的defineProperty简单实现vue的双向数据绑定

最新推荐文章于 2024-08-04 17:28:28 发布

凉菜凉凉

最新推荐文章于 2024-08-04 17:28:28 发布

阅读量648

点赞数 1

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

本文链接：https://blog.csdn.net/liangzhenmeng/article/details/105166570

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原生js简单实现vue双向数据绑定

废话不多说直接上代码

废话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div>
		<p>VUE 2.0 双向数据绑定 实现</p>
		<div>
			<p>span:<span id=spanName></span></p>
			<input type="text" id=iptName>
		</div>
	</div>
</body>
</html>

	//  使用 defineProperty 实现
		var obj = {
			name:""
		}
		var newObj = JSON.parse(JSON.stringify(obj));

		Object.defineProperty(obj,"name",{
			get(){
				return newObj.name
			},
			set(val){
				if(newObj.name==val) return
				newObj.name = val
				observer()
			}
		})
		setTimeout(()=>{
			obj.name = "liangzhenmeng"
		},1000)
		function observer(){
			iptName.value = obj.name
			spanName.innerHTML = obj.name
		}
		iptName.oninput = function(){
			console.log(this.value)
			obj.name = this.value
		}