Vue中 this.$set的用法

news2025/1/24 11:28:54

一、this.$set能够实现什么功能

     官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hello,ningzaichun’)

     简单说即是:当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了

      通过触发按钮事件  实现数据改变时,据视图层数也同步改变 ,此时便可以在控制台看到打印出来的方法及一些属性

Vue中this.$set的用法

1.  Vue.set( target, propertyName/index, value )

     数组:第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值。

   

2. this.$set(this._data,”key”,value')
      对象:第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值。

      target: 要更改的数据源(可以是一个对象或者数组) key 要更改的具体数据 (索引) value 重新赋的值。

    受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除,即Vue未做到脏数据检查。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407943.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pdf在线预览 pdf.js的使用

1.官网:https://mozilla.github.io/pdf.js/ 2、使用方法 1) 通过官网,下载pdfJs插件包,放至项目中; window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );2)将下载的pdfJS…

uniapp封装axios?大可不必那么麻烦。

最近群里的一个小明同学问 uniapp可以使用axios请求吗?我当时就一愣 反问为什么要使用axios,是 uni.request 不香了吗? 小明:因为axios可以像vue的项目一样,在request里面封装巴拉巴拉一堆。 我:那uni.re…

微信小程序开发使用onreachBottom实现页面触底加载及分页

目录 一 简要介绍一下onreachBottom事件 二 实例展示 三 遇到的一些问题 一 简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样,都属于小程序的生命周期事件,作用就是在页面下拉到底部时触发这个事件,一般适用于数据比较…

一次跨域的坑Faild to load response data: No resourse with given identifier found

有一个导出接口,前后端都没有动过,之前也测试过没有问题。上到测试环境后,测试环境加了证书,报错了。 先是后端小朋友和我说了这个问题: 浏览器控制台打印信息(聊天记录中那张图):然后我问他操作了哪个页面…

vue3.0教程——搭建Vue脚手架【简化版】

目录 哈喽,大家好丫,你们的小郭子又来啦 ~ 一、环境要求 (1)node安装(前端开发环境) (2)vue-cli脚手架安装 二、安装依赖 (1)使用命令行安装以下依赖 &a…

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一、简单介绍 二、安装和使用 三、效果图 四、vue-seamless-scroll 点击事件…

(网页开发/前端)配置VsCode,让您拥有更舒适的开发环境

vscode,微软旗下的一款强大的IDE集成开发环境,现在,越来越多的网页开发人员选择使用vscode来敲代码。 但是,在不添加任何扩展的vscode中,想要享受“丝滑”的开发体验是比较困难的。所以,接下来,…

js从地址栏获取参数

一、过程分四步: 1.获取地址栏; var loclocation.href; 2.获取地址栏的长度 var n1loc.length; 3.获取地址栏中第一个等号的位置; var n2loc.indexOf(); 4.以等号位置,截取后面的内容; var strloc.slice(n2…

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。 其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。 语法 Object.entries(obj) 参数 obj:可以返回其可枚举属性…

VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)

概述 写完代码后,最常用、简单的发布方式,就是将应用发布到文件夹,然后将publish文件夹复制到要部署的机器上(本地、局域网服务器、云服务器等)。 但是在实际工作中,可能会遇到需要频繁地发布&#xff0c…

vue--后台管理系统问题和功能实现思路集锦

目录 一、动态菜单 1、问题:点击菜单,其他菜单都会打开,且选中某个菜单,其他菜单都会选中 2、问题:home页面代码内动态菜单数据获取的位置 二、动态路由 1、问题:刷新home页面后,页面报错&…

微信小程序开发(遇到的报错和注释)

一开始验证文章出错了,一直运行不起来,取消设置,可以正常调用。 页面小程序窗口组件部分:navigationbar导航栏区域,background背景区域(默认不可见,下拉才显示)、页面的主题区域&am…

教你一文解决 js 数字精度丢失问题

文章目录一、关于为什么要解决精度丢失二、怎么解决js的计算精度丢失问题?三、toPrecision 特定方法返回四舍五入长度字符串结语一、关于为什么要解决精度丢失 可以看下例子,因为js失去精度问题也是常见的问题,正常我们可以四舍五入或者 toF…

vue3中使用ant-design-vue的layout组件实现动态导航栏功能(1~2级)

目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少&…

新星微前端MicroApp的基础教程

目录 什么是微前端? 使用场景 microApp介绍 概念图 micorApp的优势 microApp项目的应用 基座 基座路由 子应用 react项目中路由位置进行使用 跨域的问题 react项目中跨域 vue项目中跨域 micorApp基础介绍 micorApp传值(重要) …

Vue 2项目如何升级到Vue 3?

应不应该从 Vue 2 升级到 Vue 3 应不应该升级?这个问题不能一概而论。 首先,如果你要开启一个新项目,那直接使用 Vue 3 是最佳选择。后面课程里,我也会带你使用 Vue 3 的新特性和新语法开发一个项目。 以前我独立使用 Vue 2 开…

【vue】vuex常见面试题

【vue】vuex常见面试题 文章目录【vue】vuex常见面试题一、vuex简介对vuex的理解各模块在流程中的功能:Vuex实例应用二、常见面试题1.Vuex 为什么要分模块并且加命名空间2.Vuex和单纯的全局对象有什么区别?3.为什么 Vuex 的 mutation 中不能做异步操作&a…

css宽高自适应

1. 宽高自适应 举个例子看看什么是宽高自适应, (1)先正常创建一个div标签,有宽和高: 结果: (2)去掉div的宽度,观察结果 结果: 结果占满了整个屏幕&#xff0…

HTML表格样式

9675人阅读 行跟列背景颜色的选择&#xff0c;合并等 列的颜色选择代码 <colgroup span"1" bgcolor"lightgreen"></colgroup> <colgroup span"1" bgcolor"lightyellow"></colgroup> <colgroup span"…

一大波 ChatGPT 开源项目,诞生了!

公众号关注 “GitHubDaily”设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01;大家好&#xff0c;我是小 G。本月初 ChatGPT 问世&#xff0c;犹如平地惊雷般&#xff0c;在技术圈中引起了广泛讨论。作为全球最大的开发者社区&#xff0c;GitHub 平台也在近期诞生了多个…