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