先看要实现的效果：
再贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" id="inp" oninput="changeValue(value)">
<p>message is: <span id="spa">{{msg}}</span></p>
</div>
<script>
let tpl = document.getElementById('spa').innerText;
let updateView = (data) => {
let html = tpl.replace(/{{(.*)}}/, (match, $1) => {
return data[$1] || '';
});
document.getElementById('spa').innerText = html;
}
let data = {
msg: '',
_data: {}
}
Object.defineProperty(data, 'msg', {
get() {
return this._data.msg;
},
set(value) {
this._data.msg = value;
updateView(this);
}
})
data.msg = '';
let changeValue = (value) => {
data.msg = value;
}
</script>
</body>
</html>