关于 v-show 和 v-if 对表单校验的影响

v-show与v-if在Vue表单校验中的区别

最新推荐文章于 2024-01-25 11:04:31 发布

原创最新推荐文章于 2024-01-25 11:04:31 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细对比了Vue中v-show和v-if指令在处理表单控件时的不同行为，特别是在校验方面的影响。v-show仅隐藏控件而不销毁，保留的校验仍可能干扰程序执行；而v-if则完全移除控件，避免此类问题。

v-show (只是隐藏控件 , 不是将其销毁 )

当表单控件上使用 v-show 时如果加了校验即使表单控件隐藏了校验效果还会存在影响程序继续执行

v-if ( 直接将控件销毁 )

当表单控件上使用 v-if 时就算被销毁的控件上加了校验也不会影响程序继续执行

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

长发飘飘.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Element中table使用v-show不生效，使用v-if生效

Only No.1

10-29

5978

今天同事在开发中遇到一个问题，就是使用table中的type控制表格中两列，其中一列显示另一列则隐藏，同时位置有所改变，在切换tab中，发现一个bug就是tab切换到第二次的时候，显示是对的但是位置发生了变化。当时我感觉频繁操作建议让他改成v-show，结果发现没生效，主要是因为table中的td，diplay:table-cell,权限高于display:none,导致v-show失效。后面只能改成v-if,考虑到dom操作过程中，无法识别相同dom标签,导致重复使用td,需要对标签添加ke

v-if与v-show对表单验证的影响以及解决办法

csdnyp的博客

04-08

3846

v-if与v-show控制元素显隐对表单验证的影响

参与评论您还未登录，请先登录后发表或查看评论

el-form动态表单切换导致的校验bug（v-if、v-show导致校验失效的bug）

新前端小白的博客

01-20

1万+

使用v-if还是v-show 使用el-form来做表单验证时，有时候选择的条件不同，展示的el-form-item也不一样，这时候就需要控制输入框的展示与隐藏。那么，用v-if还是v-show呢？ v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁的切换，使用v-show，否则，使用v-if。表单验证bug 当使用v-if或v-show来控制el-f...

element ui 表单使用v-if切换导致校验规则失效的解决方案

ljw_Josie的博客

05-25

4800

现象我用v-if切换单选，会导致已经绑定的校验规则失效。代码解决方案方案很多，这里先贴出4种方案一：给每个item加一个key作为区分因为form-item绑定验证事件是在mounted中进行的，规则变化后没有进行重新绑定验证事件，v-if渲染组件节点diff后被复用了，所以验证也就自然失效了方案二：直接在item里写rules 方案三：使用校验函数方案四：在外层包两层div ...

el-form动态表单验证（v-if、v-show导致校验失效的bug）

YSD2468的博客

04-13

2814

今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...

form表单验证影响使用v-show还是v-if？

weixin_53877433的博客

10-19

520

form表单验证

v-if 导致 elementui 表单校验失效问题解决

jiangjunyuan168的博客

01-25

2026

在使用 elementui 表单的过程中，某些表单项需要通过 v-if 来判断是否展示，但是这些表单项出现了检验失效的问题。 1、给需要 v-if 判断的表单项添加 key 值 2、将校验规则直接绑定在 el-form-item 上 3、v-show 代替 v-if 这种方法存在一个问题，就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题，所以这种方法需要在判断的表单项字段都不相同的情况下使用。

vue el-form 遇上 v-if，表单校验不生效问题

且听风吟的博客

08-18

8964

el-form遇上v-if，表单校验不生效问题

vue+ele v-show 表单校验有数据也会校验

最新发布

09-30

在 Vue + Element UI 中，当使用 `v-show` 控制表单元素显示隐藏时，即便表单元素不可见，它仍然可能会参与校验。以下是几种解决办法： ### 动态绑定 `rules` 属性可以根据 `v-show` 的条件动态绑定表单元素的 `...

vue+ele v-show 表单校验有数据但是不通过校验

09-30

在 Vue + Element UI 项目里，使用 v-show 时表单有数据但校验不通过，可参考 v-if 相关情况来分析。使用 v-if 动态渲染 el-form 等元素时，底层虚拟 DOM 渲染时 Vue 会高效渲染元素，常复用已有元素，且 element-ui...

iview 表单验证，隐藏显示的表单之后验证信息依然存在解决办法

weixin_43779406的博客

01-07

2112

根据选择不同的值，下方的显示表单也发生变化，但是原先的验证信息并没有完全清除，如图解决办法第一种，可以在改变事件中清除验证 changeType(val) { this.$refs['form'].resetFields(); } 第二种方法，可以给验证的每个表单绑定一个唯一的key值 <FormItem label="用户名" prop="userName" v-if="isShow" key="1236"> <Input type="text" v.

表单校验隐藏的输入框显示才校验

hfyldx的博客

07-28

559

表单校验

element ui form表单项显隐，校验（不该）触发问题

zhl_cafe的博客

09-07

3687

element ui form表单项显隐，校验（不该）触发问题。

van-tab切换van-form表单时,显示前一个表单的错误校验

小迪的博客

03-21

712

bug场景描述: 利用tab切换表单时,表单校验会携带 van-tab利用v-if来控制隐藏和显示van-form表单给每个表单添加一个:key=’’ ‘’,以此来区分form表单,从而让vue清空错误校验

van-field表单验证并且跳转到验证错位位置

m0_46577631的博客

09-17

3576

van-field的表单验证 HTML部分 <van-form ref="infoForm" <van-field label="姓名" required maxlength="10" name="nameValue" v-model="nameValue" placeholder="请输入姓名" :rules="[{required:true,trigger:‘onSubmit’,message:’请输入姓名'},

vant 组件单选框用v-if 控制显示隐藏会有bug，所以采用v-show

贵林之恋的博客

11-19

3714

<template> <div class="wrapper paddingTop"> <preview v-if="show" :infoPreview="infoPreview" @cancel="show = false" @confirm="confirm" ></preview> <top-nav></top-nav> <van-f...

【VUE的Form表单】使用v-if切换控件时，表单校验不生效

weixin_55846296的博客

09-29

3675

【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效

element-ui 表单渲染v-if组件，验证报错