Vue中为对象添加属性/this.$set()的使用方法&&Object.assign(target, sources)

LinMeng 等级 824 0 0
标签: vuetarget前端

this.$set(obj,key,value)

  • 应用场景:为data中的某一个对象添加属性
    <template>
    <div>
      <button @click="addProps">添加属性</button>
      {{ hun.name }}
      <input type="text" v-model="hun.age">
    </div>
    </template>
    
**当我们点击按钮为hun添加age属性时,视图层不能够及时更新,控制台中可以看到新添加的属性,这是因为受js的限制,vue.js不能监听对象属性的添加和删除,因为在vue组件初始化的过程中,会调用getter和setter方法,所以该属性必须是存在在data中,视图层才会响应该数据的变化**
- 解决方法如下:

1. 使用this.$set(obj, key, value)/vue.set(obj, key, value)
2. 通过ES6的Object.assign(target, sources)方法
**通过这两种方式为对象添加属性之后,hun的对象身上多了get和set方法,再次操作该属性的时候,就会引起视图的更新**

收藏
评论区

相关推荐

Vue中为对象添加属性/this.$set()的使用方法&&Object.assign(target, sources)
this.$set(obj,key,value) 应用场景:为data中的某一个对象添加属性 <template <div <button @click"addProps"添加属性</button {{ hun.name }} <input type"text" vmodel"hun.age" </div </
CMake命令之set_property和get_property
set\_property:在指定域中设置一个命名属性 set\_property(<GLOBAL                            |                 DIRECTORY \[dir\]                   |                 TARGET    \[target1 \[targ
Unity相机围绕物体
using DG.Tweening; using UnityEngine; public class FollowTrackingCamera : MonoBehaviour { public static FollowTrackingCamera \_Instance; // Camera target to look at
Android中build target,minSdkVersion,targetSdkVersion,maxSdkVersion概念区分
如果开发的应用用户较多,那么必须保证应用在多个版本不同的设备上能够正确的运行。这就要求对各个版本比较熟悉,知道在什么版本中加入了什么新的功能或特性。但是Android的版本太多了,是个令人头疼的问题。如果想了解Android的版本差异,建议读一下Android开发者文档上相关的章节。 为了让你的应用程序指定可以运行的版本,Android的manifest文
Android常见错误
1、Unable to resolve target 'android-2' 安装低版本的api,再default.properties 这个文件中把target=android-2 改成 target=android-7终于就没有问题了。 2、Invalid start tag LinearLayout main.xml放错文件夹了,应该在\\res\
ES6的Object.assign()基本用法
`Object.assign`方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。   例如:   const target = {a:1},   const source1 = {b:2}   const source2 = {c:3}; Object.assign(target, source1,sou
FFmpeg(13)
**一.包含头文件和库文件** CMakeLists target_link_libraries( # Specifies the target library. native-lib OpenSLES
JavaScript 返回具体类型方法
/** * 返回target类型 * @param {} target */ function type(target) { var ret = typeof (target); var template = { "[object Array]": "ar
Leetcode No.39 组合总和
此文转载自:https://blog.csdn.net/jxq0816/article/details/113079141#commentBox ### 一、题目描述 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字
Linux 命令 mv
mv 命令 ===== \--no-target-directory 参数确保对目录进行重命名而不是移动 ---------------------------------------- [https://www.gnu.org/software/coreutils/manual/html\_node/Target-directory.html#Targ
SpringBoot自定义注解
JDK1.5起开始提供了4个元注解:@Target、@Retention、@Documented、@Inherited。何谓元注解?就是注解的注解。 @Target({ ElementType.PARAMETER, ElementType.METHOD }) @Retention(RetentionPolicy.RUNTIME) @
SpringBoot自定义注解
JDK1.5起开始提供了4个元注解:@Target、@Retention、@Documented、@Inherited。何谓元注解?就是注解的注解。 @Target({ ElementType.PARAMETER, ElementType.METHOD }) @Retention(RetentionPolicy.RUNTIME) @
TiKV 源码解析系列文章(二十一)Region Merge 源码解析
Region Merge 是 Range 相邻的两个的 Region 合并的过程,我们把一个 Region 称为 Source Region,另一个称为 Target Region,在 Merge 过程结束后,Target Region 管理的 Range 会扩大到 Source Region 的部分,Source Region 则被删除。 在上一篇 [R
Vue axios调用第三方接口跨域解决
1. == 在config目录下index.js文件中设置proxyTable: proxyTable: { '/v1': { target: 'https://api.douban.com', changeOrigin: true, pathRewrit
【数据结构与算法】—— 二分查找
1. 二分查找的概念二分查找指的是在排好序的数组中,找到目标元素。如果元素存在则返回元素的下标,不存在则返回1.下面以升序为例进行简单描述2. 查找过程:取数组中间元素与查找元素target比较。如果target等于中间元素则直接返回中间元素的下标,如果target小于数组中间元素则在数组左边查找,如果target大于数组中间元素则在右边查找。重复以上步骤。