一、隐藏的几种方式：

1、Vue的v-if、小程序的wx:if

• 说明：物理级别的显示与隐藏；即：直接处理DOM节点
  动态的向DOM树内添加或者删除DOM元素(不存在于节点树)
• 特点：

• 有惰性：如果在初始渲染条件为 false，框架什么也不做
• 有局部编译/卸载的过程，因此有更高的切换消耗

2、Vue的v-show、小程序的hidden

• 说明： 即对应{display: none;}；
  等价于：{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

3、visibility: hidden

• 等价于：{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

4、其它技巧：想办法让其不可见(透明、移出视界、缩小) 或这些组合

• 透明 支持动画

{
 opacity: 0;/*透明度为0*/
 backface-visibility: hidden;/*元素不面向屏幕时是否可见*//*如果在旋转元素不希望看到其背面时，该属性很有用。*/
 pointer-events: none;/* 鼠标事件穿透自身*/
}

• 移出视界支持动画

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

{-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}

• 缩小支持动画

{
 zoom: 0.001;
 -moz-transform: scale(0);
 -webkit-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
}

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }