显示与隐藏

一、CSS显示与隐藏的方法

1.display 显示

display属性规定元素应该生成的框的类型。

• 值为none： 此元素不会显示，从而达到影藏的效果；
• 值为block： 将此元素设为块级元素，从而达到显示的效果；
  隐藏后不占据页面空间，不再为其保留位置。

2.visibility可见性

visibility 属性规定元素是否可见。

• 值为hidden： 使元素不可见；
• 值为visible： 是元素可见；
  隐藏后继续占据页面空间上的位置。

3.overflow 溢出

overflow属性规定当内容溢出元素时发生的事情。

• visible(默认值)：内容不会被修剪，会呈现在元素框之外；
• hidden：内容会被修剪，并且其余内容是不可见的；
• scroll： 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容；
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

4.opcity 透明度

opcity属性设置元素的不透明级别。
值value规定不透明度，从0.0(完全透明)到1.0(完全不透明)。

5.position 定位

absolute：left/top：-99999px；足够到的赋值使其不可见。

6.使宽高为0

width/height为0而且可以在二级下拉菜单中设置其慢慢打开的效果，能够使用CSS3动画。

7.颜色重叠

拿一个白色div 盖住或者将颜色设置成与背景颜色相同，可以出现回字显现效果。

二、Vue中的显示与隐藏

相同点：v-if 和 v-show 都可以动态地显示DOM元素。

区别

作用

• v-if 是动态的向DOM树内添加或者删除DOM元素；
• v-show 是通过设置DOM元素的display样式属性控制显隐。

编译过程

• v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
• v-show只是简单的基于css切换。

编译条件

• v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
• v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留。

性能消耗

• v-if 有更高的切换消耗；
• v-show 有更高的初始渲染消耗。

使用场景

• v-if 适合运营条件不大可能改变；
• v-show 适合频繁切换。