Vue如何清空對象
更新時間：2022年03月03日 15:01:07 作者：花鐺
這篇文章主要介紹了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獲取當前狀態(tài)下的datathis.$options.data()獲取該組件初始狀態(tài)下的data
所以，下面就可以將初始狀態(tài)的data復制到當前狀態(tài)的data
實現(xiàn)重置效果：
Object.assign(this.$data, this.$options.data())
當然，如果你只想重置data中的某一個對象或者屬性：(一般用于表單清空數(shù)據(jù))
this.form = this.$options.data().form
某一個對象清空vule值，保留key
Object.keys(form).forEach((key) => (form[key] = ''))
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue router解決路由帶參數(shù)跳轉時出現(xiàn)404問題
我的頁面是從一個vue頁面router跳轉到另一個vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽,但是不知道為什么有時候可以有時候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉時出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue項目中使用this.$confirm方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue如何實現(xiàn)u-form多個form表單同時校驗
在 Vue 項目中使用 UView UI 的 u-form 組件時,多個表單同時校驗的需求非常常見,本文主要介紹了如何使用 u-form 組件實現(xiàn)多個表單同時校驗,需要的可以參考一下2025-01-01
淺談vuejs實現(xiàn)數(shù)據(jù)驅動視圖原理
這篇文章主要介紹了淺談vuejs實現(xiàn)數(shù)據(jù)驅動視圖原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue3組合式API獲取子組件屬性和方法的代碼實例,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
這篇文章主要介紹了使用vue-i18n?入口文件配置控制臺報警問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
如今Vue3的勢頭正盛，在diff算法方面也做了相應的變化，利用到了最長遞增子序列把性能又提升了一個檔次。本文就來帶大家簡單解刨一下Vue3中的diff算法2023-02-02
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue頁面圖片不顯示問題解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了Vue2.0實現(xiàn)簡單數(shù)據(jù)分頁，及頁數(shù)的跳轉效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07