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