59 lines
1.4 KiB
HTML
59 lines
1.4 KiB
HTML
<!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>
|
|
|
|
<hr>
|
|
<input type="text" id="input" placeholder="你输入">
|
|
<p id="p"></p>
|
|
|
|
<script>
|
|
|
|
// 类的监听
|
|
class N {
|
|
constructor() {
|
|
// 计数属性 (监听)
|
|
// this.num = 0;
|
|
// 计数属性的 映射 代理存值
|
|
this._num = 0;
|
|
|
|
let input = document.querySelector("#input");
|
|
input.oninput = () => {
|
|
this.num = input.value;
|
|
}
|
|
}
|
|
|
|
// 监听 num
|
|
set num(val) { // 设置
|
|
// console.log("num 被设置值了 值为:" + val);
|
|
document.querySelector("#p").innerHTML = val;
|
|
this._num = val; // 代理存值
|
|
}
|
|
get num() { // 查看
|
|
console.log("num 被查看了");
|
|
return this._num;
|
|
}
|
|
}
|
|
|
|
let nc = new N();
|
|
|
|
console.log('nc.num', nc.num); // undefined
|
|
console.log('nc._num', nc._num); // undefined
|
|
|
|
console.log(nc);
|
|
|
|
|
|
// MVC
|
|
// 用数据 驱动视图
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |