<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<p></p>
<script>
var input = document.querySelector('input')
var p = document.querySelector('p')
var data = {
text: '' // 输入框中的内容
}
// 真实情况应该使用递归备份
var $data = Object.assign({}, data)
function render() {
input.value = data.text
p.innerText = data.text
}
input.oninput = function(e) {
// console.log(e.target.value);
Object.defineProperty(data, 'text', {
set(val) {
$data.text = val
},
get() {
return $data.text
}
})
data.text = e.target.value
render()
}
</script>
</body>
</html>