v-if改变DOM，<ipnut>元素被复用，输入框输入的内容并没有改变，只是替换了placeholder的内容。

问题：键入内容后，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明<ipnut>元素被复用了。Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。

 

 

 

 

 

解决：使用Vue.js提供的key属性，key的值必须是唯一的，给两个input元素添加key后，就不会复用了，切换类型时键入的内容也会被删除，不过<label>元素仍然是被复用的，因为没有添加key属性。