Vue 数据绑定 input v-if 切换后取值不对-526互联

1、当一个页面有多个类型输入框时，联系人是 password 类型，联系地址是text类型,

(1)当切换regType==1时联系地址还是password类型

(2)当限制输入长度时input的value值和v-model取得值也是不一样的

<div class="lfItem" v-if="regType === '0'">
  <input type="password" v-model="formData.contact" maxlength="6" placeholder="请输入联系人" />
</div>
<div class="lfItem" v-if="regType === '1'"> 
 <input type="text" v-model="formData.address" placeholder="请输入联系地址" /> </div>

为什么会出现这个问题？

因为 Vue 在进行 DOM 渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

若是想要解决这个问题，则在 input 中指定一个唯一的 key 即可，记住：key 是要不相等的一个值