原生js实现数据双向绑定

双向绑定

使用原生js实现数据的双向绑定。
关于vue的双向数据绑定,其核心是 Object.defineProperty()方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)
obj:需要定义属性的当前对象。
prop:当前需要定义的属性名。
desc:具体的改变方法。

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向绑定title>
	head>
	<body>
		<input id="a1" oninput="hangdleChange()"/>
		<span id="a2">span>
	body>
html>
<script>
	let input =	document.getElementById('a1')
	let span =	document.getElementById('a2')
	let data = {}
	
	Object.defineProperty(data,'val',{
		get:function(){
			return val
		},
		set:function(newVal){
			val = newVal
			input.value = val
			span.innerHTML = val
		}
	})
	
	function hangdleChange(){
		data.val = input.value
	}
script>

你可能感兴趣的:(vue,javascript,前端,vue.js)