vuev-if和v-show,v-if和v-show的用法
v-if和v-show的区别是前端面试中经常被问到的一个基础知识点。顾名思义，用v-if和v-show来判断视图层的显示效果。下面这篇文章主要介绍Vue常用指令v-if和v-show区别的相关信息，有需要的可以参考一下。
目录
前言1。v秀2。v-if3。V-show和V-if的区别
1.原则2的区别。使用应用程序场景的差异汇总
前言
V-show和v-if是常用的Vue指令，经常用来判断一些代码块的渲染。但是它们之间的具体区别是什么呢？
首先，我们来看看Vue中文社区文档的介绍：
简单来说，Vue中文社区描述文档是：初始渲染时显示条件判断；
1. v-show
v-show指令的作用是根据真值和假值切换元素的显示状态，有求必应。
表达式v-show= expression
原理是修改一个元素的CSS属性(display)来决定是显示还是隐藏。
以下指令最终将解析为布尔值。
该元素在值为true时显示，在值为false时隐藏。
数据发生变化后，相应元素的显示状态会同步更新。
身体
div id=应用程序
Type= button value=切换显示 @click=changeIsShow/
P-show= is show 。不，我要摊牌了。是的，你要找的是我。
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本
var app=新Vue({
埃尔： #app ，
数据：{
isShow:false
},
方法：{
changeIsShow(){
this.isShow=！这是一场秀
}
}
})
/脚本
/body
2. v-if
v-if指令的作用：根据真或假表达式切换元素的显示状态。
V-if= expression
本质是通过操纵dom元素来切换显示。
当表达式的值为true时，元素存在于dom树中，当表达式的值为false时，元素从dom树中移除。
身体
div id=应用程序
Type= button value= click me切换显示 @click=changeIsShow/
P-if= is show 。不，我要摊牌了。是的，你要找的是我。
/div
script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script
脚本
var app=新Vue({
埃尔： #app ，
数据：{
isShow:false
},
方法：{
changeIsShow(){
this.isShow=！这是一场秀
}
}
})
/脚本
/body
3. v-show和v-if的区别
1. 在原理方面的区别
V-show指令：元素总是被渲染成HTML，它只是一个简单的伪元素，用来设置css的style属性。当不满足条件的元素设置为style="display: none "时，通过修改元素的CSS属性(display)来决定是显示还是隐藏。
V-if指令：如果满足条件，就渲染成html如果不满足条件，就不会渲染成html，通过操纵dom元素来切换显示。
2. 在使用应用场景方面的区别
V-if需要操作dom元素，切换消耗较高。
V-show只修改元素的CSS属性，初始渲染成本较高。
如果需要频繁切换，最好用v-show，如果运行时条件很少变化，最好用v-if。
总结
关于Vue常用指令v-if和v-show的区别这篇文章就到这里了。更多关于Vue的指令v-if和v-show的区别，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。