Vue如何清空對(duì)象
Vue清空對(duì)象
JS清空對(duì)象
使用字面量方法指向一個(gè)新的對(duì)象:
var obj = { ? ? name: 'Lee', ? ? age: 20 }; obj = {};
var obj = { ? ? name: 'Lee', ? ? age: 20 }; for(var key in obj){ ? ? delete obj[key]; }
Vue清空對(duì)象
使用對(duì)象字面量,不推薦使用。
<div id="app"> ? ? <button @click="deleteInfo">刪除</button> ? ? 姓名:{{ message.name }}, ? ? 年齡:{{ message.age }} </div>
var app = new Vue({ ? ? el: '#app', ? ? data: { ? ? ? ? message:{ ? ? ? ? ? ? name:"Lee", ? ? ? ? ? ? age: 20 ? ? ? ? } ? ? }, ? ? methods:{ ? ? ? ? deleteInfo:function(){ ? ? ? ??? ??? ?this.message = {}; ? ? ? ? } ? ? } })
使用 Vue.delete:
<div id="app"> ? ? <button @click="deleteInfo">刪除</button> ? ? 姓名:{{ message.name }}, ? ? 年齡:{{ message.age }} </div>
var app = new Vue({ ? ? el: '#app', ? ? data: { ? ? ? ? message:{ ? ? ? ? ? ? name:"Lee", ? ? ? ? ? ? age: 20 ? ? ? ? } ? ? }, ? ? methods:{ ? ? ? ? deleteInfo:function(){ ? ? ? ? ? ? for(let key of Object.keys(this.message)){ ? ? ? ? ? ? ? ? Vue.delete(this.message,key); ? ? ? ? ? ? } ? ? ? ? } ? ? } })
某一個(gè)對(duì)象清空vule值,保留key
其中就是將一個(gè)對(duì)象的屬性copy到另一個(gè)對(duì)象
在vue中
this.$data
獲取當(dāng)前狀態(tài)下的datathis.$options.data()
獲取該組件初始狀態(tài)下的data
所以,下面就可以將初始狀態(tài)的data復(fù)制到當(dāng)前狀態(tài)的data
實(shí)現(xiàn)重置效果:
Object.assign(this.$data, this.$options.data())
當(dāng)然,如果你只想重置data中的某一個(gè)對(duì)象或者屬性:(一般用于表單清空數(shù)據(jù))
this.form = this.$options.data().form
某一個(gè)對(duì)象清空vule值,保留key
Object.keys(form).forEach((key) => (form[key] = ''))
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 報(bào)錯(cuò)TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報(bào)錯(cuò)TypeError: this.$set is not a function 的解決方法,分享給大家,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項(xiàng)目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關(guān)于餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03解決vue-cli webpack打包開(kāi)啟Gzip 報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue-cli webpack打包開(kāi)啟Gzip 報(bào)錯(cuò)問(wèn)題的解決方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07vue項(xiàng)目中公用footer組件底部位置的適配問(wèn)題
footer為公用組件,其他頁(yè)面都需要引入。接下來(lái)通過(guò)本文給大家分享vue項(xiàng)目中公用footer組件底部位置的適配問(wèn)題,需要的朋友可以參考下2018-05-05詳解Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12