vue中v-if和v-show的区别
文章为本菜鸡学习过程中遇到的问题记录，不是专业的，如有问题和不足还请大佬指正 >参考文章
文章目录
- 前言
- 1、v-if
- 2、v-show
- 3、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="表达式"。
<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适合运行条件很少改变的情况。