vue中vue.set有3个参数,分别是:1、target,表示要更改的数据源;2、key,表示要更改的具体数据;3、value,表示重新赋的值。

本文操作环境:windows10系统、vue2.9,Dell G3电脑。
Vue.set()
Vue.set( target, key, value )
参数:
-
target:要更改的数据源(可以是对象或者数组)
立即学习“前端免费学习笔记(深入)”;
key:要更改的具体数据
value :重新赋的值
官方API:Vue.set()
Vue.set的使用
{{item.message}}
此时页面是这样

我点击第一个按钮后运行methods中的btn2Clcick方法,此时我要将Test one更改为Change Test

运行后的结果:此时列表中第一列的Test one已经变成了Change Test

同徽B2B电子商务软件是国内第一个基于J2EE架构的电子商务商业程序,在国内同类软件中市场占有率位居第一。目前客户分布二十多个省份,三十几个行业,直接和间接服务500万企业,其中包括多家部级单位和世界500强企业:商务部、农业部、德赛集团、宝钢集团、江苏龙华集团、深圳中农股份、中集集团等。 。 网站参数管理运营商可对整个网站进行灵活的配置,适应不同的运营需求网站更新将信息生成静态页面,加快浏览速
这里得警惕一种情况:
当写惯了JS之后,有可能我会想改数组中某个下标的中的数据我直接this.items[XX]就改了,如:
btn2Click:function(){
this.items[0]={message:"Change Test",id:'10'}
}我们来看看结果:

这种情况,是Vue文档中明确指出的注意事项,由于 JavaScript 的限制,Vue 不能检测出数据的改变,所以当我们需要动态改变数据的时候,Vue.set()完全可以满足我们的需求。
仔细看的同学会问了,这不是还有一个按钮吗,有什么用?
我们还是直接看:

这是初始的列表数据,数据里面有三个对象
点击之后:

这里可以看出,Vue.set()不光能修改数据,还能添加数据,弥补了Vue数组变异方法的不足
Tip:Vue.set()在methods中也可以写成this.$set()
推荐:《vue教程》









