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