init
This commit is contained in:
59
Html-Javascript/26-类的监听.html
Normal file
59
Html-Javascript/26-类的监听.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!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>
|
Reference in New Issue
Block a user