Vue怎么清空對象

本篇內(nèi)容介紹了“Vue怎么清空對象”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Vue清空對象

JS清空對象

使用字面量方法指向一個(gè)新的對象：

var obj = {
    name: 'Lee',
    age: 20
};
obj = {};

var obj = {
    name: 'Lee',
    age: 20
};
for(var key in obj){
    delete obj[key];
}

Vue清空對象

使用對象字面量，不推薦使用。

<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è)對象清空vule值，保留key

其中就是將一個(gè)對象的屬性copy到另一個(gè)對象

在vue中

• this.$data 獲取當(dāng)前狀態(tài)下的data

• this.$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è)對象或者屬性：(一般用于表單清空數(shù)據(jù))

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

某一個(gè)對象清空vule值，保留key

Object.keys(form).forEach((key) => (form[key] = ''))

“Vue怎么清空對象”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！