JavaScript的Object.defineProperty( )方法
Object.defineProperty方法可以在一个对象上定义一个新的属性,或者修改该对象原有的属性,并返回该对象。
基础的语法格式如下:
1 var data = {}//定义一个对象
2 Object.defineProperty(data,'name',{
3 configurable:false,//设置对象的属性是否可以被修改/删除(默认为false)
4 enumerable:false,//设置对象的该属性是否可以枚举(默认为false)
5 value:111,//设置对象该属性的值(数值,对象,函数等)默认为undefined
6 writable:false,//设置对象该属性的值是否可以修改(默认为false)
7 //get函数,函数的返回值被用作属性的值
8 //set函数,属性值被修改时,调用此函数。
9
10
11 })
可以利用该属性,实现vue的双向绑定:
1 <input type="text" id="text" placeholder="请输入你的名字" />
2 <p id="textshow"></p>
1 var obj = {}
2 Object.defineProperty(obj,'name',{
3 set(val){
4 $('#text').val(val);//设置或返回表单字段的值
5 $('#textshow').text(val);//设置或返回元素的文本内容
6 },
7 get(){}
8 })
9 $('#text').keyup(function(event){
10 obj.name = event.target.value;
11 })
12 console.log(obj)
实现效果如图所示:
当在控制台设置属性的值,dom页面也会做出改变
实现效果如图所示:
当对象需要设置多个属性时,可以使用Object.defineProperties
语法格式为:
1 var obj = {};
2 Object.defineProperties(obj, {
3 'property1': {
4 value: true,
5 writable: true
6 },
7 'property2': {
8 value: 'Hello',
9 writable: false
10 }
11 // etc. etc.
12 });
好的,第一篇随笔结束,完结,撒花!
JavaScript的Object.defineProperty( )方法的更多相关文章
- JavaScript使用Object.defineProperty方法实现双数据绑定
Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 O ...
- JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...
- Object.defineProperty方法 使用
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法: Object.defineProperty(obj, pr ...
- Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- javascript之Object.defineProperty的奥妙
直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...
- Object.defineProperties()和Object.defineProperty()方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...
- js中Object.defineProperty()方法的解释
菜菜: “老大,那个, Object.defineProperty 是什么鬼?” 假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做 1 2 3 var user = ...
- ES5 Object.defineProperty 方法
先看一个例子: var o = {}; o.a = 1; // 等待于: Object.defineProperty(o, 'a', { value: 1, writable: true, confi ...
- Object.defineProperty方法
Object.defineProperty() (一次添加/修改一个属性) 用法:Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一 ...
随机推荐
- MySQL时区的问题
我这里是在application.properties文件中配置的MySQL连接信息. 开始时间显示不征程是因为没有配置时区,后来加上了setTimeZone=Asia/Shanghai,时间显示正常 ...
- profile2的原理猜想
1, profile2 是一个 entity_type, 可以包含fields, 每个用户都对应一个profile的id, 其实就是type id, 就相当于bundle, 所谓的函数profile ...
- spring-cloud项目初始化问题
无法引入本地依赖 参考:https://blog.csdn.net/qq_39684784/article/details/115289982 时区问题: url设置:serverTimezone=U ...
- docker 部署的mariadb数据库备份还原方案
docker部署下的mariadb数据库备份还原方案 背景:在使用docker部署的mariadb时,我们会将容器内的数据卷挂载到宿主机上,做简单的备份,容器在正常运行和停止的情况下,能快速创建mar ...
- RayLink测评 | 完全免费,功能超越同类付费远程控制软件!!
*本文转载自自媒体[下1个好软件],作者:锋哥. 远程控制软件目前的需求非常大,因为某些原因,你可能得居家办公远程控制公司的电脑,又或者出差不再需要带笨重的笔记本办公,一台平板电脑远程就搞定等等. 但 ...
- Win10 ISS Web服务器安装与部署
Win10 ISS Web服务器安装与部署 安装 ISS 控制面板-->程序-->启用或关闭 Windows 功能-->Internet Information Services 测 ...
- Python中的容器、迭代器、生成器
容器是一系列元素的集合,str.list.set.dict.file.sockets对象都可以看作是容器,容器都可以被迭代(用在for,while等语句中),因此他们被称为可迭代对象. 可迭代对象实现 ...
- Liunx 日志检索 grep -v -a awk
grep -5 'parttern' inputfile.log //打印匹配行的前后5行 grep -C 5 'parttern' inputfile.log //打印匹配行的前后5行 gr ...
- web server 接口调用
1. 生成客户端代码 2.调用接口 import javax.xml.ws.Service;public static NotificationServiceDevImplPortType mokaA ...
- jdk版本与项目依赖jar包不兼容
这两天出现了一个 java.lang.RuntimeException: java.io.IOException: invalid constant type: 18 tomcat启动出现这个问题的原 ...