隐藏元素

visibility: hidden

visibility:hidden;允许动画并且保留元素在屏幕上的占用空间，会留一个blank(一个空白区域)

<div style="visibility: hidden">
  <span>not visible</span>
  <span style="visibility: visible">visible!</span>
</div>

提醒：尽量不要用visibility: visible;去显示一个嵌套的子元素，会导致父元素设置hidden失效。

display: none

display:none;会导致元素完全消失，它不会占用任何空间

opacity: 0

v-show 与 v-if

• 控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

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

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好