vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决(两种解决方法)
作者：?abc!
这篇文章主要介绍了vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决，本文给大家分享两种解决方法,需要的朋友可以参考下
原由
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
场景复现
如下所示
<template v-if="type === 'name'"> <input placeholder="Enter your name"> </template> <template v-else> <input placeholder="Enter your email address"> </template>
如果代码中使用上述的进行输入框的切换，在切换时便会发现输入框中的内容并不会被清空，而是继续遗留，仅仅是替换了它的 placeholder
解决方法1（实测有效）
由此，vue提供一种方式来表示这两个元素是完全独立的，不要复用它们，那便是：添加一个具有唯一值的 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元素仍然会被高效地复用，因为它们没有添加 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，只是隐藏控件 , 不是将其销毁
如果是对加了表单验证的元素进行显示隐藏，当使用 v-show 时，元素隐藏了，但是表单验证依旧存在，valid 永远返回 false
到此这篇关于vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决的文章就介绍到这了,更多相关vue 使用v-if切换输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！