Vue 中 v-if 和 v-show 的区别和用法

使用Vue这个前端框架，控制元素显示隐藏最常用就是 v-if 和 v-show 了，今天有人问我，什么时候用 v-if ？什么时候用 v-show？今天把这两个拿到这里对比区分一下，希望可以帮助到你们。

区分这两者的区别，首先得知道这两个的实现原理。直接上代码

<div v-show="vShow" class="div1">v-show控制的元素</div>
<div v-if="vIf" class="div2">v-if控制的元素</div>

 data: {vShow: true, // 控制v-show显示的开关vIf: true // 控制v-if显示的开关}

显示效果如下图,两个元素都显示，这没问题。

当开关全部调整为false时

<div v-show="vShow" class="div1">v-show控制的元素</div>
<div v-if="vIf" class="div2">v-if控制的元素</div>

 data: {vShow: false, // 控制v-show显示的开关vIf: false // 控制v-if显示的开关}

效果图如下，
div1还在，但是css属性display：false，让他隐藏了；
div2则消失了，彻底从DOM结构中消失了。

看到这儿大家应该就能看明白了。

总结一下

工作原理上

v-show 仅仅控制元素的显示方式，通过display属性的none来控制。
v-if 会操作文档流，控制这个DOM节点的存在与否。

使用上

当我们需要经常切换某个元素的显示/隐藏时，使用 v-show 会更加节省性能，只是改变css属性，不会操作文档流，不会改变DOM结构。
当某个元素初始化时，需要通过一次判断来控制显示隐藏，后期不会频繁切换，使用 v-if 会更好。

Vue 中 v-if 和 v-show 的区别和用法相关推荐

Python中threading的join和setDaemon的区别及用法例子
Python中threading的join和setDaemon的区别及用法 Python多线程编程时,经常会用到join()和setDaemon()方法,今天特地研究了一下两者的区别. 1.join ...
转 Java中final、finally、finalize的区别与用法
Java中final.finally.finalize的区别与用法 1.简单区别: final用于声明属性,方法和类,分别表示属性不可交变,方法不可覆盖,类不可继承. finally是异常处理语句结构 ...
java replaceall函数_JAVA中string.replace和string.replaceAll的区别及用法
展开全部 JAVA中string.replace()和string.replaceAll()的区别及用法乍一看,字面上理解好像replace只替换第一个出现的字符(受javascript的影响),32 ...
JAVA中string.replace()和string.replaceAll()的区别及用法数据库中[]转义
JAVA中string.replace()和string.replaceAll()的区别及用法乍一看,字面上理解好像replace只替换第一个出现的字符(受javascript的影响),replac ...
Vue中watch、computed、updated的区别
watch watch:侦听器,监听某个数据的变化然后执行相对应的方法,来响应数据的变化,尤其是当需要数据变化时执行异步操作或着开销较大时,这个方式是最有用的 <div id="wat ...
java中printf，print，println，区别及用法详解
此题是蓝桥杯的一道竞赛试题,在编写程序时,遇到了printf的用法,不是很熟悉,特此总结一下. 以下是对Java中print.printf.println的区别进行了详细的分析介绍,需要的朋友可以过来 ...
【Python画图】Matplotlib中fig、ax、plt的区别及其用法（入门）
Matplotlib中fig.ax.plt的区别 1. fig.ax.plt三者的基本概念 2. fig方法的层级 3. 案例 3.1 fig和ax方法(面向对象) 3.2 plt方法 4. 总结参 ...
vue中slot,slot-scope,v-slot的用法和区别
以下仅为个人理解,若有不妥请留言评论区 v-slot 指令自 Vue 2.6.0 起被引入,在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持,但已经被 ...
vue中computed、metfods、watch的区别
一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...
vue中created、mounted、activated的区别
created:在模板渲染成html之前调用,即通常初始化某些属性值,然后再渲染成视图:但是注意,只会触发一次 mounted:在渲染成html之后调用,通常是初始化页面完成后,再对html的dom节 ...

Vue 中 v-if 和 v-show 的区别和用法

区分这两者的区别，首先得知道这两个的实现原理。直接上代码

Vue 中 v-if 和 v-show 的区别和用法相关推荐

最新文章

热门文章