原由
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