v-if时输入框复用（输入字符不清除）的问题

在使用v-if样式切换时会有发现一个小问题，那就是输入字符后切换发现输入框里不会被清空。

摁f12可以发现输入框的id是不一样的。按道理我们应该进入到另外一个input元素里了

要搞清楚这个问题，首先要知道，vue在真正渲染dom到浏览器之前是会先将所有的元素渲染到一个虚拟dom里的。
而出于性能的考虑，vue在虚拟dom里会尽可能的复用一些重复的元素。这就是为什么会出现不同的输入框id却没有真正切换到的原因。因为实际上，浏览器上显示的还是同一个输入框。

解决这个问题其实很简单，只需要在不同的input元素上加上不同的key就ok了。