vue中v-if和v-show的区别

文章为本菜鸡学习过程中遇到的问题记录,不是专业的,如有问题和不足还请大佬指正 >参考文章

文章目录


前言

问题描述:

在完成表单验证任务的学习过程中,发现在使用v-show隐藏元素后,依旧会被dom捕获,rules规则依旧有效,在未显示表单的前提下,依旧显示'必填项未填写'的提示。

(表单验证,感兴趣的话可以看我的另外一篇博文:element表单校验

虽然在使用上v-if和v-show没有什么太大的区别,但是本质上还是存在一定的差异性!


1、v-if

在vue中,v-if用于根据表达式来操作DOM元素,可以切换元素的显示和隐藏;表达式的值为true时,元素存在于dom树中,表达式为false时,元素从dom树中移除,语法为v-if="表达式"

c 复制代码
<div v-if="isAnonymous">
	<el-form-item prop="lianxidh" ref="lianxidh" :rules="[{ required: true, message: '【举报人电话】不能为空', trigger: 'blur' }]">
		<el-input disabled v-model="state.form.lianxidh" type="text" />
	</el-form-item>
</div>

2、v-show

v-show指令的作用是根据真假切换元素的显示状态,原理是修改元素的display实现显示隐藏,指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐,数据改变之后,对应元素的显示状态会同步更新

3、v-if和v-show的区别

【v-show】

①本质就是标签display设置为none,控制隐藏只是基于css进行切换。

②v-show有更高的初始渲染消耗。

③v-show适合频繁切换的情况。

【v-if】

①动态的向DOM树内添加或者删除DOM元素。

②v-if有更高的切换消耗。

③v-if适合运行条件很少改变的情况。

相关推荐
打不着的大喇叭43 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm1 小时前
Dioxus 与数据库协作
前端·rust