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

LinMeng 等级 709 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
Java递归拷贝文件夹
### 拷贝文件或文件夹 /** * 拷贝文件 * * @param source 源文件 * @param target 目标文件 */ public void copyFile(String source, String target) { // 源文件
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) @
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue axios调用第三方接口跨域解决
1. == 在config目录下index.js文件中设置proxyTable: proxyTable: { '/v1': { target: 'https://api.douban.com', changeOrigin: true, pathRewrit