Object.defineProperty 监听对象属性变化
<!DOCTYPE html>
<html lang="zh"> <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>
<script type="text/javascript">
let obj = {}
let value = ''
Object.defineProperty(obj, 'name', {
get: () => {
return value
},
set: (newVal) => {
console.log('检测到变化', newVal);
value = newVal;
}
})
console.log(obj.name, ' 1')
obj.name = 'mfg'
console.log(obj.name, ' 2')
</script>
</body> </html>
Object.defineProperty 监听对象属性变化的更多相关文章
- js 数据监听--对象的变化
class Observer { constructor(data) { this.data = data; this.filterObj(data); } static isObject(obj) ...
- JS监听对象属性改变
设想这么一个需求: user.name = '张三' 对user数据进行操作的时候,同步的修改页面上的用户名为张三. 这就是个数据绑定的概念. 针对这类需求 ES5提供了Object.definePr ...
- vue2.0使用watch监听对象属性
二话不说直接代码,找了一个百度都没找到.... var head=new Vue({ data:{ checkBoxState:{//监听设置开关勾选状态 notice:true, sound:tru ...
- vue 2.0 watch 监听对象的变化
- AngularJS - Watch 监听对象
<body> <div ng-app="myApp"> <div ng-controller="firstController"& ...
- vue--》如何使用wacth监听对象的属性变化？
在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现 监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- Proxy监听对象的数据变化，处理绑定数据很有用
Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处. }; //interceptor 拦截 var ...
- watch监听对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- MySQL启动项提权
关于MySQL的启动项提权,听其名知其意.就是将一段 VBS脚本导入到 C:\Documents and Settings\All Users\「开始」菜单\程序\启动 下,如果管理员重启了服务器, ...
- java中代码块的认知
在以往面试题中,出现过很多次关于代码块执行顺序的题目,目前可算是搞清楚执行顺序了.看以下代码: package com.itcast.code; public class BlockTest { st ...
- [bzoj1022][SHOI2008]小约翰的游戏 John (博弈论)
Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...
- April Fools Day Contest 2016 F. Ace It!
F. Ace It! 题目连接: http://www.codeforces.com/contest/656/problem/F Description Input The only line of ...
- Codeforces Round #346 (Div. 2) C. Tanya and Toys 贪心
C. Tanya and Toys 题目连接: http://www.codeforces.com/contest/659/problem/C Description In Berland recen ...
- hihocoder 162周 1323 : 回文字符串
hihocoder1323 : 回文字符串(162周) 题目链接 思路: dp; ac代码: #include<iostream> #include<cstdio> #incl ...
- hihocoder 1523:数组重排2
题目链接 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个1-N的排列A1, A2, ... AN,每次操作小Hi可以选择一个数,把它放到数组的最左边. 请计算小 ...
- Android中数据存储（三）——SQLite数据库存储数据
当一个应用程序在Android中安装后,我们在使用应用的过程中会产生很多的数据,应用都有自己的数据,那么我们应该如何存储数据呢? 数据存储方式 Android 的数据存储有5种方式: 1. Share ...
- HDU 4611 Balls Rearrangement（2013多校2 1001题）
Balls Rearrangement Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Othe ...
- Visual Studio删除所有的注释和空行
visual studio用"查找替换"来删掉源代码中所有//方式的纯注释和空行 注意:包括/// <summary>这样的XML注释也都删掉了. 步骤1/2(删除注释 ...