vue 使用v-if切換輸入框時導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決(兩種解決方法)
更新時間：2023年05月30日 10:09:10 作者：?abc!
這篇文章主要介紹了vue 使用v-if切換輸入框時導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決，本文給大家分享兩種解決方法,需要的朋友可以參考下
原由
Vue 會盡可能高效地渲染元素，通常會復(fù)用已有元素而不是從頭開始渲染
場景復(fù)現(xiàn)
如下所示
<template v-if="type === 'name'"> <input placeholder="Enter your name"> </template> <template v-else> <input placeholder="Enter your email address"> </template>
如果代碼中使用上述的進(jìn)行輸入框的切換，在切換時便會發(fā)現(xiàn)輸入框中的內(nèi)容并不會被清空，而是繼續(xù)遺留，僅僅是替換了它的 placeholder
解決方法1（實測有效）
由此，vue提供一種方式來表示這兩個元素是完全獨(dú)立的，不要復(fù)用它們，那便是：添加一個具有唯一值的 key 屬性
<template v-if="type === 'name'"> <input placeholder="Enter your name" key="name"> </template> <template v-else> <input placeholder="Enter your email address" key="address"> </template>
如果代碼如下：label元素仍然會被高效地復(fù)用，因為它們沒有添加 key 屬性
<template v-if="type === 'name'"> <label>name</label> <input placeholder="Enter your name" key="name"> </template> <template v-else> <label>address</label> <input placeholder="Enter your email address" key="address"> </template>
解決方法2（未實測）
v-if換成v-show，只是隱藏控件 , 不是將其銷毀
如果是對加了表單驗證的元素進(jìn)行顯示隱藏，當(dāng)使用 v-show 時，元素隱藏了，但是表單驗證依舊存在，valid 永遠(yuǎn)返回 false
到此這篇關(guān)于vue 使用v-if切換輸入框時導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決的文章就介紹到這了,更多相關(guān)vue 使用v-if切換輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue?+?Node.js自動發(fā)布服務(wù)腳本的完整流程
在當(dāng)今快節(jié)奏的軟件開發(fā)環(huán)境中,前端項目的快速迭代與高效部署成為了提升競爭力的關(guān)鍵,這篇文章主要介紹了基于Vue+Node.js自動發(fā)布服務(wù)腳本的完整流程,需要的朋友可以參考下2026-03-03
項目中后臺返回的時間有多種形式,時間戳、ISO標(biāo)準(zhǔn)時間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時間格式,下面這篇文章主要給大家介紹了關(guān)于vue時間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue進(jìn)入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程
這篇文章主要介紹了vue進(jìn)入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
element el-tooltip動態(tài)顯示隱藏(有省略號顯示,沒有省略號不顯示)
本文主要介紹了element el-tooltip動態(tài)顯示隱藏,主要實現(xiàn)有省略號顯示,沒有省略號不顯示,具有一定的參考價值,感興趣的可以了解一下2023-09-09
Element el-checkbox-group v-model不支持對象(object)解決方案
本文主要介紹了Element el-checkbox-group v-model不支持對象(object)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
在Vue項目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue移動端如何解決click事件延遲，封裝tap等事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue TypeScript使用eval函數(shù)遇到的問題
近幾年前端對 TypeScript的呼聲越來越高，Typescript也成為了前端必備的技能。TypeScript是JS類型的超集，并支持了泛型、類型、命名空間、枚舉等特性，彌補(bǔ)了 JS 在大型應(yīng)用開發(fā)中的不足2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)購物車的基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11