原生JSは双方向データバインディングを実現する.

3634 ワード

//html  
<input type="text" id="foo">
<p id="test"></p>


//js  
<script>
	var user = {
     
		get inputValue() {
     
			return document.getElementById('foo').value
		},
		set inputValue(value) {
     
			document.getElementById('foo').value = value
			document.getElementById('test').innerHTML = value
		}
	}
	document.getElementById('foo').addEventListener('keyup',function(){
     
		document.getElementById('test').innerHTML = user.inputValue
	})
</script>