vue什么时候初始化data,vue改变data的值
本文主要介绍Vue重置数据到初始状态的操作方案,有很好的参考价值,希望对大家有所帮助。来和边肖一起看看吧。
在某些情况下,需要重用data中的数据,但是data中的数据已经被各种形式、变量等赋值。那么如何重置数据的值呢?
1. 逐个赋值
.
data() {
返回{
名称: ,
性别: ,
desc:“”
}
}
.
//逐个赋值
this.name=
this.sex=
this.desc=
这种方法比较笨,当然也能达到效果,但是一个一个重新赋值比较麻烦,代码看起来也会很乱。
下面这个方法绝对是你的最爱,一行代码就能搞定~
2. 使用Object.assign()
MDN对该方法的介绍:Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
用法:object.assign (target,来源)
第一个参数是目标对象,第二个参数是源对象,就是把源对象的属性复制到目标对象,返回目标对象。
其中一个对象的属性被复制到另一个对象。
vue中:
这个。$data获取当前状态的数据
这个。$options.data()获取该组件初始状态的数据。
因此,下面可以将初始状态下的数据复制到当前状态下的数据来实现复位效果:
Object.assign(this。$data,这个。$options.data())
当然,如果您只想重置数据中的对象或属性:
this.form=this。$options.data()。形式
扩展
object.assign(目标,sources)方法也可用于合并对象:
const O1={ a:1 };
常数O2={ b:2 };
const O3={ c:3 };
const obj=Object.assign(o1,o2,O3);
console . log(obj);//{ a: 1,b: 2,c: 3 }
console . log(O1);//{a: 1,b: 2,c: 3},注意目标对象本身也会发生变化。
如果对象包含相同的属性,则取最后一个属性:
const o1={ a: 1,b: 1,c:1 };
常数o2={ b: 2,c:2 };
const O3={ c:3 };
const obj=Object.assign({},o1,o2,O3);
console . log(obj);//{a: 1,b: 2,c: 3}属性采用最后一个对象的属性。
以上个人经历,希望能给大家一个参考,也希望大家多多支持我们。如有错误或不足之处,请不吝赐教。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。