简单介绍vue中this.$set使用介绍

最新推荐文章于 2024-04-15 15:28:06 发布
最新推荐文章于 2024-04-15 15:28:06 发布
阅读量446 收藏
点赞数
文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45992946/article/details/116004601
版权
在Vue开发中，若在实例创建后尝试给data对象添加新的属性并期望视图更新，通常需要使用this.$set方法。由于ES5的限制，Vue无法检测到对象动态添加的属性。通过this.$set(this.data, 'key', value)，可以确保属性变为响应式，从而实现视图的同步更新。" 112931855,10540516,Koopa Shell碰撞检测：修复2D游戏中的碰撞问题,"['2D碰撞', '游戏编程', 'Unity3D', 'C#编程', '游戏物理']
摘要由CSDN通过智能技术生成

使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
正确写法：this.$set(this.data,”key”,value’)。下面附上代码以及图片

在这里插入图片描述
在这里插入图片描述

<el-button type
最低0.47元/天 解锁文章
进击吧!前端小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中 this.$set的用法
weixin_66375317的博客
07-05 1万+
Vue中 this.$set的用法
Vue中的this.$set
~~
05-10 1万+
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 调用方法: Vue.set( target , key , value) target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值 &lt..
$set()的使用方法
最新发布
Cwhat的博客
04-15 540
$set是 Vue.js 中的一个全局API，主要用于动态向响应式对象中添加新属性或者修改已有属性，并确保新属性也是响应式的。的值在未来被更改，界面将会自动更新。对象添加一个新的响应式属性。
vue this.$set 方法
servepeople的博客
09-27 1267
方法是 Vue.js 提供的一个用于在响应式数据中添加新属性的工具函数。它的主要作用是在对象或数组上添加属性或元素，确保这些属性或元素也是响应式的，即可以触发视图的重新渲染。方法是一个在Vue.js中用于处理响应式数据的有用工具，特别是当你需要动态添加属性或元素时。数组的指定索引处添加新元素。这样做可以确保新属性和新元素也是响应式的，当它们发生变化时，会触发视图的更新。通常，当你需要在组件的数据对象中动态添加属性时，Vue.js 推荐使用。来确保添加的属性是响应式的。在上述示例中，我们有一个名为。
vue中this.$set()的用法
袁的博客
10-20 1万+
vue中this.$set()的用法
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因 在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
Vue.set()和this.$set()使用和区别 　在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话...
关于vue中this.$set用法
Eno_Lin的博客
10-22 608
关于vue中this.$set用法 上面图表示点击添加属性后给表单进行赋值，在setmessage打印的话数据是更新的但是视图是不更新的，此时可以加多一个$set使其变成响应式属性，这样数据就可以做到更新，同时也可以用来做表单上移下移操作 附上上移下移操作代码 ...
vue element-ui 电商平台分润功能(包含$set,form表单规则校验,阿里巴巴矢量图标库引入,el-dialog弹窗等)
yehaocheng520的博客
07-20 915
电商平台分润功能： this.$set(对象，属性名，属性值) form表单校验 :rules=“rules” 与prop的合用，表单validate提交 阿里巴巴矢量图标库的引入及使用 el-dialog弹窗 el-dialog弹窗 佣金按钮如上图： 弹窗代码如下： // title:弹簧标题 visible.sync 同步的显示与隐藏 width:弹窗宽度 :before-close：关闭弹窗之前执行的函数 <el-dialog title="分润信息" :visible.sync=".
vue中this.$set的用法
m0_63460934的博客
10-11 1116
vue中this.$set的用法
Vue中this.$set()的使用场景和用法以及与Vue.set()的区别
可口可爱w的博客
09-21 2689
Vue.set( ) 是将 set 函数绑定在 Vue 构造函数上，this.$set() 是将 set 函数绑定在 Vue原型上。当我们给一个对象添加属性时，在控制台上可以打印出来，但是视图却没有更新，此时this.$set()就派上用场了。2）在使用this.$set()的情况下：（直接修改methods中handleClick方法）target：要更改的数据源(可以是对象或者。key：要更改的具体数据。value ：重新赋的值。
this.$set()方法的使用
weixin_43135973的博客
11-18 513
this.$set()方法的使用
vue中this.$set()的用法----更新数组和对象的值
热门推荐
m0_67391521的博客
03-06 2万+
我们先看看官网给出的解释： 1、更新数组: 我们有一个数组，包括人员姓名和人员年龄两个属性。 想要实现在页面刚加载的时候改变姓名为李四的人的信息。 首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就需要用到this.$set
vue的this.$set使用
前端-黎姿
03-30 496
this.$set作用： 手动更新界面，相当于Vue.set( ) 原理: 首先，vue能更新数据，依赖于vue的数据是响应式数据，defineproperty里面的get和set会监听数据的变化，从而更新界面 使用场景： 当数据改变了，但是界面没有变化 使用方法： 数组： this.set(arr,index,val)−参数：数组，索引，修改的值对象：this.set(arr, index,...
Vue 中set函数的使用以及坑点分析
ChuanyangChen的博客
01-08 759
Vue 中set() 函数的使用以及缺点分析 this.$set(this.student,'gender','男'); this.$set(追加的对象名,'追加的字段名','追加的字段值'); 以下代码展示的是点击按钮后为student对象追加一个性别属性： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></sc
vue中$set的用法
splx2013的博客
07-28 9434
一.什么是$set 要明白什么是set我们就先要了解vue的数据双向绑定的原理，VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。 二.具体应用 <!-- vue中$set的用法 --> <template> <div>
vue中this.$set的使用
04-13
在Vue中，this.$set是一个用于动态添加响应式属性的方法。通常情况下，当你使用Vue.set或者this.$set来给一个对象添加一个新的属性时，这个属性将不会触发视图的更新。但是，使用this.$set可以确保新添加的属性也能够触发视图的更新。 this.$set的语法如下： this.$set(object, key, value) 其中，object是要添加属性的对象，key是要添加的属性名，value是要添加的属性值。 下面是一个示例，展示了如何使用this.$set来动态添加属性： ``` <template> <div> <p>{{ message }}</p> <button @click="addProperty">Add Property</button> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; }, methods: { addProperty() { this.$set(this, 'newProperty', 'This is a new property'); } } }; </script> ``` 在上面的示例中，当点击按钮时，addProperty方法会调用this.$set来给当前组件实例添加一个名为newProperty的属性，并将其值设置为"This is a new property"。由于使用了this.$set，新添加的属性会触发视图的更新，从而在页面上显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值