Vue怎么清空對象

本篇內容介紹了“Vue怎么清空對象”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Vue清空對象

JS清空對象

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

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);
            }
        }
    }
})

某一個對象清空vule值，保留key

其中就是將一個對象的屬性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

某一個對象清空vule值，保留key

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

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