vue如何將對象中所有的key賦為空值
更新時間：2022年04月08日 11:58:01 作者：zky的博客
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
將對象中所有的key賦為空值
Object.assign的使用，當(dāng)然你也可以使用for去遍歷 然后再一一去賦值為空字符串，推薦使用（Object.assign）
先來看看Object.assign的基本用法
Object.assign方法用于對象的合并，第一個參數(shù)（目標(biāo)對象），可以有第二個，第三個參數(shù)，都是源對象，將源對象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對象（target）。
const target = {a:1};
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}注意：Object.assign方法的第一個參數(shù)是目標(biāo)對象，后面的參數(shù)都是源對象
言歸正傳，有時候會碰到的需求是，有多個input框，每個input框都v-modei綁定了對應(yīng)的value值，當(dāng)點擊重置按鈕時，要清空所有input中的值，這時候可以用到Object.assign方法，具體怎么實現(xiàn)看代碼
html代碼
?<input type='text' v-model='valueData.value1'></input> ?<input type='text' v-model='valueData.value2'></input> ?<input type='text' v-model='valueData.value3'></input> ?<button @click=‘toReset'>重置（清空輸入框）<button>
js 代碼
const values = {
? value1:'',
? value2:'',
? value3:'',
}
data(){
?return {
? ?valueData:Object.assign({},values)
?}
},
methods：{
? //這時候如果你隨意在輸入框輸入值，點擊重置按鈕 ，只需要重新給valueData復(fù)制 就能清空input中的值了
?toReset(){
?this.valueData = Object.assign({},values)
?}
}vue空值報錯問題
如上圖所示，提示percent為空，web效果圖如下
如果是自測階段不想麻煩就直接在數(shù)據(jù)庫添加數(shù)據(jù)就行或者或者初始化方法賦初始值，最簡便的還是在vue template里進行判斷
代碼如下：
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue2.0基于vue-cli+webpack Vuex的用法(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack Vuex的用法(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue electron應(yīng)用調(diào)exe程序的實現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實現(xiàn)步驟,用Python寫了一個本地服務(wù)編譯成exe程序,在electron程序啟動后,自動執(zhí)行exe程序,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)數(shù)字動態(tài)翻牌器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了vue實現(xiàn)數(shù)字變換動畫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
如何在 Vue3 中使用 OpenLayers 實現(xiàn)事件 loadst
在這篇文章中,我將詳細(xì)介紹如何在 Vue3 + OpenLayers 中監(jiān)聽 loadstart 和 loadend 事件,并通過 Vue3 Composition API 進行代碼優(yōu)化,使其更加高效、健壯,感興趣的朋友一起看看吧2025-04-04
Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用
這篇文章主要介紹了Vue.directive 實現(xiàn)元素scroll邏輯復(fù)用功能，文中給大家提到元素實現(xiàn)滾動的條件有兩個，具體內(nèi)容詳情大家參考下本文2019-11-11
本文主要介紹了vue實現(xiàn)接口封裝的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法
這篇文章主要介紹了vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Nuxt的動態(tài)路由和參數(shù)校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11