久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

Vue 重置data的數據為初始狀態操作

瀏覽:3日期:2022-09-30 18:53:30

在某些情況下,需要重新使用data中的數據,但是data中的數據已經被各種表單、變量等賦值,那么怎么重置data的值呢?

1. 逐個賦值

...data() { return { name: ’’, sex: ’’, desc: ’’ }}...// 逐個賦值this.name = ’’this.sex = ’’this.desc = ’’

這個方法比較笨,當然也可以實現效果,但是一個一個去重新賦值比較麻煩而且代碼看起來也會比較亂。

下面這個方法肯定是你喜歡的,一行代碼搞定~

2. 使用Object.assign()

MDN關于該方法的介紹:Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

用法: Object.assign(target, ...sources)

第一個參數是目標對象,第二個參數是源對象,就是將源對象屬性復制到目標對象,返回目標對象

其中就是將一個對象的屬性copy到另一個對象

vue中:

this.$data 獲取當前狀態下的data

this.$options.data() 獲取該組件初始狀態下的data

所以,下面就可以將初始狀態的data復制到當前狀態的data,實現重置效果:

Object.assign(this.$data, this.$options.data())

當然,如果你只想重置data中的某一個對象或者屬性:

this.form = this.$options.data().form

擴展

Object.assign(target, ...sources) 方法還可以用來合并對象:

const o1 = { a: 1 };const 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 };const 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 } 屬性取最后一個對象的屬性

以上為個人經驗,希望能給大家一個參考,也希望大家多多支持好吧啦網。如有錯誤或未考慮完全的地方,望不吝賜教。

標簽: Vue
相關文章:
主站蜘蛛池模板: 拉孜县| 铁岭县| 古蔺县| 信丰县| 乐清市| 贵阳市| 泰兴市| 庄河市| 丹棱县| 罗定市| 社会| 尖扎县| 霍城县| 泸西县| 怀柔区| 客服| 抚宁县| 分宜县| 普洱| 巴里| 济源市| 申扎县| 金门县| 滕州市| 宜都市| 蒲城县| 崇州市| 宣城市| 金平| 涿州市| 高碑店市| 兴安盟| 淮北市| 灵寿县| 南投县| 栾川县| 枝江市| 仁化县| 洱源县| 永修县| 古丈县|