object.definepProperty使用方法,vue2双向绑定原理

2023-11-20

首先要介绍的是definepProperty的三个参数

object.definepProperty(对象名,属性名,属性值)

再者要介绍的就是属性值了,

object.definepProperty(person,age,{value:18})

 此时我们会遇到如下几个问题

一、第一,我们添加的这个属性名,不可被枚举

object.definepProperty(person,age,{value:18})

object.keys(person)

for(var item in person){
    console.log(item)
}

解决方法:

我们为其添加可枚举属性。enumerable:true,默认值是false

Object.defineProperty(obj, 'age', {
  value: "18",
  enumerable: true
});

二、第二,我们添加的这个属性名,不可被修改

object.definepProperty(person,age,{
value:18
enumerable:true
})

person.age =20

解决方法:添加writeable:true(可以被修改)属性,默认值false(不可被修改)

object.definepProperty(person,age,{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值是false
writeable:true // 控制属性是否可以被修改,默认值是false
})

person.age =20

三、第三,我们添加的这个属性名,不可被删除

object.definepProperty(person,age,{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值是false
writeable:true // 控制属性是否可以被修改,默认值是false
})

delete person.age 
//或者
delete person['age']

解决方法:添加configurable:true(可以被删除),默认值false(不可被删除)

Object.defineProperty(person.age,{
value:18,
enumerable:true, //控制属性是否可以被枚举,默认值false
writerable:true,  // 控制属性是否可以被修改,默认值false
configrable:true //控制属性是否可以被删除,默认值false
})

四、get(gtter)和set(setter)用法

1.当要将另一个变量的值number赋值给age时候,当改变number的值的时候,对象中age的值并没有发生改变

number=10

person={
age:number
}
// {age:10}

number =12

//{age:10}

解决,此时我们就要用到get()函数来实现,get的返回值,就是age的值

get():当有人读取person的age属性时,就会调用get()方法,此时number现在的值就会赋值给age

object.definepProperty(person,age,{
    get(){
        return number
    }
})

2.当有人给age赋值时候,但是age的值没有改变,这是因为age的值是number

var number =10

person={
    age:number
}
person.age =20
// {age:10}

解决方法:使用set()函数,获取到age改变的值,然后赋值给number

set():当有人改变age 的时候,获取到改变的值,赋值给number,此时我们再次获取age时候,就会调用get()把number的值赋值给age

object.definepProperty(person,age,{
    // 当有人获取age时候,就会调用get()
    get(){
        return number
    },
    //当有人改变age的时候,就会调用set()
    set(value){
    number = value
}
})

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

object.definepProperty使用方法,vue2双向绑定原理 的相关文章

  • 有没有办法在 React.render() 函数中渲染多个 React 组件?

    例如我可以这样做 import React from react import PanelA from panelA jsx import PanelB from panelB jsx React render
  • libxmljs 的替代品 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 目标 使用 Node js 访问网页 使用 xpath 语法操作 DOM 并打印新的 DOM libxm
  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 如何将 Django 中的数组传递给模板并在 JavaScript 中使用它

    我想将数组传递给模板 然后通过 JavaScript 使用它 In my views py I have arry1 Str 500 20 return render to response test html array1 arry1 在
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • Javascript 在另一个函数中检测“Shift”键按下

    我正在从 Flash 影片 使用外部接口 调用我的 html 页面中的 Javascript 函数 并且我想知道调用该函数时用户是否按下了 Shift 键 例如 如果我通过鼠标单击调用该函数 这似乎很简单 因为我可以传递事件并检查 if e
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 递归修剪对象中所有元素的更好方法?

    如果我有一个像这样的物体 const obj field subfield innerObj a asdasd asdas innerArr s ssad innerArrObj b adsad 我想出了这样的东西 const trimFi
  • Cosmos DB Mongo API 如何管理“请求率很大”情况

    我有以下代码 async function bulkInsert db collectionName documents try const cosmosResults await db collection collectionName
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • “|”是什么意思(单管道)在 JavaScript 中做什么?

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • p5 向量减法“sub”返回错误

    我一直在尝试将 p5 草图上传到 React 构建中 使用react p5 wrapper 我能够成功在屏幕上渲染画布 但是 某些矢量函数会导致错误 var distance this position dist ball position
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • JDK源码 --

    Object类 一 简介 gt java lang Object 是Java所有类的父类 在你编写一个类的时候 若无指定父类 没有显式extends一个父类 会默认的添加Object为该类的父类 在JDK 6之前是编译器处理 即编译后的zc
  • 【Python中线程和进程详解】

    一 区别 几乎所有的操作系统都支持同时运行多个任务 每个任务通常是一个程序 每一个运行中的程序就是一个进程 即进程是应用程序的执行实例 现代的操作系统几乎都支持多进程并发执行 注意 并发和并行是两个概念 并行指在同一时刻有多条指令在多个处理
  • 配置NFS服务器-debian

    NFS Network Files System 是网络文件系统的英文缩写 由Sun公司于1980年开发 用于在UNIX操作系统间实现磁盘文件共享 在Linux操作系统出现后 NFS被Linux继承 并成为文件服务的一种标准 通过网络 NF
  • 施耐德电气携中国信通院和中国联通共同发布白皮书,共探5G+PLC深度融合应用

    2023年9月20日 全球能源管理和自动化领域的数字化转型专家施耐德电气在第23届中国国际工业博览会首日的9月19日 与中国信息通信研究院 以下简称 中国信通院 及中国联合网络通信集团有限公司 以下简称 中国联通 联手重磅发布 5G PLC
  • 6.SSH框架整合及简单使用示例

    6 SSH框架整合 ssh spring spring mvc hibernate 6 1 整合的场所 web xml 跟 5 ssm框架 整合类似 可以对照学习 通过监听器配置hibernate 通过servlet配置mvc web xm
  • 设计模式之观察者模式(Observer)摘录

    23种GOF设计模式一般分为三大类 创建型模式 结构型模式 行为模式 创建型模式抽象了实例化过程 它们帮助一个系统独立于如何创建 组合和表示它的那些对象 一个类创建型模式使用继承改变被实例化的类 而一个对象创建型模式将实例化委托给另一个对象
  • 2021蓝桥杯模拟赛-跳跃

    题目 题目链接 题解 动态规划 算是比较基础的状态方程和状态定义 但是难点在于处理负权重的情况 代码 include
  • 通过微信小程序实现登录功能

    后端服务器可以在CSDN上开通 价格优惠 CSDN开发云 https img home csdnimg cn images 20220518054835 png https dev csdn net activity utm source
  • Java多线程(7):并发_线程同步_队列与锁(Synchronized)

    一 并发举例 线程不安全 1 两个人同时操作一张银行卡 如何保证线程安全 2 多个人同时购买一张火车票 谁能买到 二 并发特点 1 同一个对象 2 被多个线程操作 3 同时操作 三 如何保证线程安全 线程同步 队列 锁 1 使用队列的技术一
  • 走路步数怎么在屏幕上显示_华为走步步数不在屏幕上显示如何设置

    展开全部 1 打开手机的设置选项 找到 安全和隐私一栏 点击进入 2 进入后下拉屏幕 32313133353236313431303231363533e4b893e5b19e31333365666262找到并且选择 锁屏和密码 3 进入后在
  • idapython常用api记录7.0

    2019 02 13 idapython常用api记录 以下代码片段可以在ida的output窗口中测试用 需要引入相关的模块即可 import idaapi import idc import idautils 后续需要使用的程序代码指令
  • VUE 出现Access to XMLHttpRequest at 'http://192.168.88.228/login/Login?phone=19939306484&password=111'...

    报错如上图 解决办法首先打开 config gt index js 粘贴 如下图代码 https www baidu com 换成要访问的的api域名 注意只要域名就够了 不是整个api地址 代码 效果图 如下 更改完以后 还需要我们把sr
  • JDK1.8中HashMap的底层实现原理

    1 创建HashMap对象 public HashMap new一个hashmap 加载因子为默认的0 75f this loadFactor DEFAULT LOAD FACTOR all other fields defaulted 2
  • React中非受控组件-ref与受控组件理解

    内容 受控组件是通过 React 组件的状态来控制表单元素的值 非受控组件是通过手动操作 DOM 的方式来控制 此时 需要用到一个新的概念 ref ref 用来在 React 中获取 DOM 元素 非受控组件 ref ref的使用格式 步骤
  • list,tensor,numpy相互转化

    使用Pytorch的过程中 经常涉及到变量需要在list numpy和tensor之间自由转化 1 1 list 转 numpy ndarray np array list 1 2 numpy 转 list list ndarray tol
  • python3.7安装tkinter模块_Mac安装tkinter模块问题解决方法

    class Python lt Formula desc Interpreted interactive object oriented programming language homepage https www python org
  • ABAP--新语法--Open SQL--第四天-- From Table

    From Table Internal Table 在 ABAP 7 52 后 支持将内表作为数据源使用 内表作为数据源使用时 需要定义别名并使用转义符 该用法可以用来代替 FOR ALL ENTRIES IN 但FROM 语句中最多使用一
  • java脚本引擎Groovy实战

    前言 互联网时代随着业务的飞速发展 不仅产品迭代 更新的速度越来越快 个性化需求也是越来越多 如何快速的满足各种业务的个性化需求是我们要重点思考的问题 我们开发的系统如何才能做到热部署 不重启服务就能适应各种规则变化呢 实现业务和规则的解耦
  • APP环信集成 -JAVA后端

    环信的集成有两种方式 一种是先创建IM账号 然后在创建客服账号 在客服账号中新建渠道中 点击关联IM账号 这样创造出的关联以IM为主 收费要收取客服和IM两项费用 官方论坛里有给出这种方式的JAVA demo这里不过的赘述 这种场景适用于类
  • object.definepProperty使用方法,vue2双向绑定原理

    首先要介绍的是definepProperty的三个参数 object definepProperty 对象名 属性名 属性值 再者要介绍的就是属性值了 object definepProperty person age value 18 此