vue 使用v-if切换输入框时，导致输入框的数据内容没有清空

ゝ一纸荒年。 2024-03-16 09:27 37阅读 0赞

## 原由 ##

**`Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染`**

## 场景复现 ##

如下所示

如果代码中使用上述的进行输入框的切换，`在切换时便会发现输入框中的内容并不会被清空，而是继续遗留，仅仅是替换了它的 placeholder`

## 解决方法1（实测有效） ##

由此，vue提供一种方式来表示`这两个元素是完全独立的，不要复用它们`，那便是：**`添加一个具有唯一值的 key 属性`**

如果代码如下：`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