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适合运行条件很少改变的情况。

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试