欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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（實(shí)測有效）

由此，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ù)用，因?yàn)樗鼈儧]有添加 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（未實(shí)測）

v-if換成v-show，只是隱藏控件 , 不是將其銷毀

如果是對加了表單驗(yàn)證的元素進(jìn)行顯示隱藏，當(dāng)使用 v-show 時，元素隱藏了，但是表單驗(yàn)證依舊存在，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)文章

最新評論