“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情”
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕~~~~,谢谢大家⭐️⭐️⭐️~~~
使用场景
当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变
在vue文档中写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。 所以需要响应式使用set方法
$set和Vue.set介绍
Vue.set( target, propertyName/index, value )
-
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
-
返回值:设置的值。
-
用法:
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如
this.myObject.newProperty = 'hi'
)注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
vm.$set( target, propertyName/index, value )
-
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
-
返回值:设置的值。
-
用法:
这是全局
Vue.set
的别名。 -
参考:Vue.set
案例用法
//this.blockData1 要改变的数组,,索引值,,,value值
data = [
{},
{},
]
//改变索引对应的值
Vue.set(this.data, index, item)
//this.blockData1 要改变的对象,,新增的字段名,,,value值
data = {
a:'1',
b:'2',
}
//增加c字段
$Vm.$set(this.data, 'c', format1000);
近期热门文章
- lucky-canvas 抽奖
- 宏任务和微任务的理解
- Js数组去重的多种方法
- Echarts 特殊环形图展示
- Echarts堆叠柱状图百分比显示,tooltip展示百分比和数量
- Echarts 横向堆叠柱状图 + markLine
- vue使用echarts 实现世界地图、中国地图、以及下钻地图绘制
- JavaScript 的几种循环方式
- Js 数据类型转换的几种方式
- 手写【横柱带斜三角】进度条实现
专栏推荐
推荐一下自己的专栏,欢迎大家收藏关注😊~