<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Object.defineProperty</title>
</head>
<body>
<div class="wrap">
<p>当前的值为: <b id="count"></b></p>
<input type="text" onkeyup="updateValue(event)">
<button>创建一个随机的值</button>
</div>
<script>
var data= {
count: ''
}
function updateValue(e) {
data.count = e.target.value
}
Object.defineProperty(data, 'count', {
get() {
console.log(`当前时间 ${Date.now()}: 代码走到了这里 获取 count`)
return count
},
set(value) {
console.log(`当前时间 ${Date.now()}: 代码走到了这里 设置 count`, value)
count = value
document.querySelector('#count').innerHTML = value
document.querySelector('input').value = value
}
})
document.querySelector('button').onclick = function() {
var random = Math.random()
data.count = random
}
</script>
</body>
</html>
网站首页 > 技术文章 正文
猜你喜欢
- 2024-08-23 前端之变(六):引领式变革,从命令式UI到声明式UI
- 2024-08-23 react函数式组件语法(react函数组件与类组件)
- 2024-08-23 建议收藏 | Vue 面试中常问知识点整理
- 2024-08-23 「React 手册 」组件生命周期函数——shouldComponentUpdate介绍
- 2024-08-23 Vue组件通信(vue组件通信的方法)
- 2024-08-23 这6个React技巧让你获得愉悦工作体验
- 2024-08-23 使用 React useState Hooks 六个误区
- 2024-08-23 vue的数据响应式原理和双向数据绑定的原理是什么?
- 2024-08-23 不吹不黑丨用Vue和React构建相同应用程序,区别在哪?
- 2024-08-23 面试官:说说 React 性能优化的手段有哪些?
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (77)
- vector线程安全吗 (73)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)
