【Vue】vue中的$set的作用
CrazyPanda发表于:2024-05-13 23:34:50浏览:247次
$set 的作用是响应式地设置对象或数组的属性,确保更改被 vue.js 追踪和更新,从而触发视图重新渲染。其用法包括:vue.set(target, key, value),适用于直接赋值不起作用、添加或删除对象或数组属性的情况。
Vue.js 中 $set 的作用
$set 是 Vue.js 中一个用于响应式地设置对象或数组属性的函数。它的主要作用是确保对对象或数组的更改能够被 Vue.js 追踪和更新,从而触发视图的重新渲染。
如何使用 $set
$set 函数有以下用法:
Vue.set(target, key, value)
target:要设置属性的对象或数组。
key:要设置的属性的键。
value:要设置的新值。
什么时候使用 $set
在以下情况下需要使用 $set:
当直接属性赋值不起作用时:如果直接给对象或数组属性赋值,但视图未更新,则需要使用 $set。
当添加或删除对象或数组中的属性时:要向对象或数组添加或删除属性,必须使用 $set。
示例
假设我们有一个包含 name 属性的对象:
const person = { name: 'John' };
如果我们想更改 name 属性,可以使用以下代码:
Vue.set(person, 'name', 'Mary');
这样,Vue.js 将追踪到 name 属性的更改,并更新视图以显示新的值。
需要注意的事项
如果尝试设置不存在的属性,$set 会自动创建该属性。
如果尝试设置一个不可写的属性(使用 Object.defineProperty 定义),$set 将抛出一个错误。
$set 是一个 Vue.js 特定函数,只适用于 Vue.js 实例中反应式的对象和数组。
猜你喜欢
- 【VUE】vue3组件间的通信,父组件调用子组件方法
- 文章目录一、父组件数据传递N个层级的子组件二、使用v-model指令实现父子组件的双向绑定三、父组件props向子组件传值四、子组件emit向父组件传值五、通过expose和ref来实现父组件调用子组件的方法vue3 provide 与 injectA组件名称 app.vueB组件名称 provideB.vueC组件名称 provideCSetup.vue父组件名称 app.vue子组件名称 v-modelSetup.vue子组件 propsSetup.vue父组件 app.vuevue3 ev
- 【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)
- 文章目录📋前言🎯关于 Print.js🧩PDF 打印🧩网页(HTML)打印🧩图像打印🧩JSON 打印🧩下载并安装使用🧩相关配置🎯 Vue3 中使用 Print.js 实战🎯Vue3 + Nodejs + Print.js 模拟打印实战案例🧩启动 Nodejs 服务🧩启动 Vue 项目📝最后📋前言今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的
- 【VUE】Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!
- 先上效果图 插件安装先说 word 文件是docx-preview插件 excel文件是用 xlsx 插件 介绍后端返回的数据因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据,比如显示图像或者播放音视频文件blobs:&
- 【Vue】vue2应用与vue3的不同之处
- 上一篇,我使用了vue2创建了一个应用,这次我使用vue3创建一个应用,看一下两者有什么不同。如下,是我用cue3创建的应用目录发现和vue2应用的目录一模一样,然后我用对比工具对比了两者的文件。1. 文件区别下面是package.json文件的区别,首先vue版本不同,对应的扩展组件也不同。下面是main.js的不同然后是APP.vue的不同2. 全局实例改变2.x 全局 API3.x 实例 API (app)Vue.configapp.configVue.config.productionT
- 【Vue】yarn 运行vue3项目开发模式
- 要在YARN中以Vue.js 3的开发模式运行项目,可以按照以下步骤进行操作:确保已经安装了Node.js和YARN。如果没有安装,请先安装这两个工具。打开命令提示符或终端并导航到Vue.js 3项目所在的文件夹。使用以下命令来初始化新的YARN项目(如果还未创建):yarn init -y接下来,需要安装Vue CLI脚手架工具。运行以下命令来全局安装Vue CLI:npm install -g @vue/cli然后,通过以下命令将Vue CL
- 【Vue】Vue中使用Vuex管理全局状态详解和示例
- vue.js是一种流行的前端框架,它提供了很多方便的功能,但当应用变得越来越复杂时,我们很快就会发现向子组件传递大量数据变得非常困难。这就是为什么vuex在vue中变得如此重要的原因。vuex是一个全局状态管理器,使得数据和状态的共享变得更容易。在本文中,我们将深入了解vuex的工作原理并演示如何将其集成到您的vue应用程序中。什么是VuexVuex是一个用于Vue.js应用程序的状态管理模式和库,常用于解决跨层级、多组件、多页面共享状态问题。它将应用程序的状态集中存储到一个单一的store中,
- 【Vue】Vue中如何使用v-for指令循环输出对象
- 在vue中,v-for是一种指令,在模板中使用它可以对数组或对象进行循环操作。v-for指令用于循环渲染数据,它是vue中非常有用的指令之一。在vue中,使用v-for指令循环输出对象的方式和循环输出数组的方式类似,只需要稍作区别即可。如何使用v-for指令循环输出对象呢?下面我们将分以下几个部分进行讲解。一、v-for指令的基本使用v-for指令的基本语法如下:<div v-for="(item,index) in items">{
- 【Vue】深入剖析:Vue核心之虚拟DOM
- 转载:https://www.cnblogs.com/caihongmin/p/17510878.html前言使用 Vue 做项目也有两年时间了,对 Vue 的 api也用的比较得心应手了,虽然对 Vue 的一些实现原理也耳有所闻,例如 虚拟DOM、flow、数据驱动、路由原理等等,但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的,所以利用空闲时间,进行 Vue 框架相关技术原理和 Vue 框架的具体实现的整理。如果你对 Vue 的实现原理很感兴趣,那么就
栏目分类全部>
推荐文章
- 【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录
- 【UniApp】uniapp中路由传参的加密与解密方式
- 【Redis】Redis中缓存穿透、击穿、雪崩以及解决方案
- 【PHP】用PHP从数据库到后端到前端完整实现一个中秋节祝福语项目
- 【UniApp】uniapp怎么判断是否安装微信
- 【PHP】PHP8.0新函数解析:str_contains()
- 【PHP】Permission denied怎么解决
- 【PHP】Thinkphp8 配置异常全局捕捉处理
- 【Python】如何使用Python实现Floyd-Warshall算法
- 【Python】如何利用Python编写RSA加密算法