【Vue】vue中的$set的作用
CrazyPanda发表于:2024-05-13 23:34:50浏览:256次
$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框架 使用总结(一) Vue框架的基础使用
- 目录一、Vue3框架基础1、创建项目2、项目结构3、Vue基础语法4、组件之间通信5、组合式api二、VueRouter的基础使用1、安装2、使用案例3、完整案例步骤4、调优-路由懒加载三、Vuex数据管理1、实现案例 2、更改store状态,同步操作3、store中的计算属性4、redux里的异步操作Action5、模块化管理四、网络请求Vue3官方文档:Vue.js - 渐进式 JavaScript 框架 | Vue.js基础部分见官方文档一、Vue3框架基础1、创建项目安装yar
- 【Vue】vue2vue3项目使用antd
- 前言项目研发需要,已经用了两年的ant design pro(react),因为会的人比较少,更多的人在使用vue,所以新项目决定使用antd vue来开发,好在比较熟悉了ant design组件的使用,也算是有一些基础。ant design 官网https://ant.design/index-cnantd vue 官网https://www.antdv.com/components/overview-cn 当前版本V4.1.2vue2项目-引入antd参考:https://www.antdv
- 【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】Vue中使用vue-router的妙用详解
- vue是当前最热门的前端框架之一,它不仅简洁易用,而且具有强大的扩展性,其中一个值得关注的插件就是vue-router。vue-router是vue官方路由插件,它可以更好地控制vue应用中的路由导航,使路由与组件之间的关系更加清晰,提升了用户的交互体验。本文将详细解读vue-router的使用方法及妙用。一、安装和使用在使用vue-router之前,需要先安装它。可以使用npm包管理器来安装vue-router插件。安装命令如下:npm install vue-router
- 【Vue】vue中sync作用
- vue 中的 sync 修饰符用于在父组件和子组件之间实现双向数据绑定。它通过生成一个 v-model 指令,将子组件的 prop 与父组件的 prop 绑定在一起,从而实现数据同步。用法如下:1. 在子组件中使用 v-bind:prop.sync="parentprop",其中 prop 是子组件的 prop 名称,parentprop 是父组件绑定的 prop 名称。Vue 中 sync 作用在 Vue 中,sync 修饰符是一种特殊的语法糖,它允许在父组件和子组件之间进
- 【Vue】Antd Pro Vue的使用(十) —— a-form表单赋值
- 在Ant Design Pro Vue中,为表单赋值通常涉及到两个方面:一是使用v-model进行双向绑定,二是直接通过this.form.setFieldsValue()方法设置表单字段的值。以下是一个简单的例子,展示如何为Ant Design Pro Vue中的表单赋值:首先,确保你已经在组件中引入了a-form-model和相关的表单字段组件比如a-form-model-item和a-input。在data函数中定义一个form对象,它包含了你想要绑定的表单字段。使用v-model指令将输
- 【Vue】Andt Pro Vue的使用(六) —— 描述列表a-descriptions设置label和content的样式
- 1、 a-descriptions设置label和content的样式在react组件中,可以直接设置labelStyle和contentStyle,来设置label和content的样式,但是在vue2的组件中,官方并没有给出响应的设置方法如下是我的订单详情页面label的宽度是自适应的,想要设置为固定的宽度,网上找了好多方法,都不生效直到遇到下面的方法https://blog.csdn.net/fifty_one/article/details/120219194 要使用/deep,
- 【Vue】vue中的$set的作用
- $set 的作用是响应式地设置对象或数组的属性,确保更改被 vue.js 追踪和更新,从而触发视图重新渲染。其用法包括:vue.set(target, key, value),适用于直接赋值不起作用、添加或删除对象或数组属性的情况。Vue.js 中 $set 的作用$set 是 Vue.js 中一个用于响应式地设置对象或数组属性的函数。它的主要作用是确保对对象或数组的更改能够被 Vue.js 追踪和更新,从而触发视图的重新渲染。如何使用 $set$set 函数有以下用法:Vue.set(targ
栏目分类全部>