hualinux 进阶 vue 1.9：vue命令（五）显示隐藏v-show命令

目录

​​一、v-show指令用法​​

​​二、例子​​

​​三、v-if与v-show隐藏的区别​​

---

vue的v-show命令使用的频率也挻高的，主要是显示和隐藏。这个不会产生占位。

一、v-show指令用法

可以看​​Vue的v-show指令​​

• 预期：​​any​​
• 用法：

根据表达式之真假值，切换元素的 ​​display​​ CSS property。

当条件变化时该指令触发过渡效果。

• 参考：​​条件渲染 - v-show​​

二、例子

把前章v-if的例子改为v-show试下

<div v-show="show">这是隐藏的内容</div>

运行按F12，我的是火狐浏览器，会有debug工具栏出现。 

点一下按钮试下效果，发现标签并没有被销毁

三、v-if与v-show隐藏的区别

v-show 隐藏 是display:'none'。v-if 隐藏是 visibility:hidden;

display:none和visibility:hidden的区别是：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。