Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
在某些情況下,需要重新使用data中的數(shù)據(jù),但是data中的數(shù)據(jù)已經(jīng)被各種表單、變量等賦值,那么怎么重置data的值呢?
1. 逐個賦值...data() { return { name: ’’, sex: ’’, desc: ’’ }}...// 逐個賦值this.name = ’’this.sex = ’’this.desc = ’’
這個方法比較笨,當然也可以實現(xiàn)效果,但是一個一個去重新賦值比較麻煩而且代碼看起來也會比較亂。
下面這個方法肯定是你喜歡的,一行代碼搞定~
2. 使用Object.assign()MDN關(guān)于該方法的介紹:Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標對象。它將返回目標對象。
用法: Object.assign(target, ...sources)
第一個參數(shù)是目標對象,第二個參數(shù)是源對象,就是將源對象屬性復(fù)制到目標對象,返回目標對象
其中就是將一個對象的屬性copy到另一個對象
vue中:
this.$data 獲取當前狀態(tài)下的data
this.$options.data() 獲取該組件初始狀態(tài)下的data
所以,下面就可以將初始狀態(tài)的data復(fù)制到當前狀態(tài)的data,實現(xiàn)重置效果:
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 } 屬性取最后一個對象的屬性
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。如有錯誤或未考慮完全的地方,望不吝賜教。
相關(guān)文章:
1. MyBatis JdbcType 與Oracle、MySql數(shù)據(jù)類型對應(yīng)關(guān)系說明2. .NET SkiaSharp 生成二維碼驗證碼及指定區(qū)域截取方法實現(xiàn)3. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建( Dovecot )4. django創(chuàng)建css文件夾的具體方法5. ASP中if語句、select 、while循環(huán)的使用方法6. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲7. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法8. ASP中實現(xiàn)字符部位類似.NET里String對象的PadLeft和PadRight函數(shù)9. 存儲于xml中需要的HTML轉(zhuǎn)義代碼10. 利用CSS制作3D動畫
