v-if和v-show的不同（在表单验证中）

最近写了个用户管理，里面有个编辑功能和添加功能，这两个都是用的同一个组件，通过v-if来控制表单上的元素，编辑里是只有两个选择，用户状态和用户角色，而添加里面是有用户名，密码和角色选择，所以在这几个元素上要进行隐藏和显示的区别，一开始我是用的v-show，本意是以为v-show和v-if区别不大，就想用v-show试试，这一试就使出了毛病，我的表单valid验证一直是false，不通过，找了很久没找出问题，后面是我师傅给我找出来的，就是这两个指令的区别，v-if是销毁和创建dom元素来隐藏和显示，而v-show是通过css来隐藏和显示元素，在表单验证中，这些不需要的dom元素是需要销毁的，不然就影响了表单的验证。

效果如下：

 

 

代码如下：

 

 补充说明：在表单验证中，有选择的是用change，input这种是用blur