元素的隐藏总结

display：none （设置了该属性，盒子被隐藏，原来的位置也不在占有）display:block(盒子显示)

display设置成none虽然被隐藏了，但不是代表消失了，在检查代码还能看见。（虽然隐藏了但是还可以获取到此元素，并且操作此元素）

visibility：visible/hidden visible显示 hidden隐藏 visibility设置成hidden之后虽然被隐藏，但是继续占有原来的位置。

overflow：hidden（是对元素中溢出的部门进行隐藏，包括元素内部的盒子或者文本）visible是显示出来 虽然隐藏并不代表被删除了。虽然元素的内容溢出了，但是溢出的部分并不挤占其他盒子的位置，但是溢出部分会显示在其他位置上，但是不冲突。

vue中的v-if 和v-show

vue中的v-show设置为false或者true就是隐藏和显示 底层实现就是display等于none还是block就是虽然被隐藏了，但是结构还在，但是不占有原来的位置 使用该指令仍然可以拿到该节点。比如用ref获取元素仍然可以获取到。

v-if 设置为true或者为false 隐藏的很彻底，结构也不再了。（就会回去不到该节点）比如ref时获取该元素就会没了。

如果隐藏和显示操作很频繁建议使用v-show，因为结构还在，只是简单的隐藏和显示并且不占据原来的位置，但是v-if是结构没了，不断的在dom上添加一个节点，导致效率不太好。

v-else-if （和if else if 一样的使用方法）前面成立，后面不看了，如果前面不成立，后面在判断。

v-else 表示以上条件都不成立，执行当前，即展示当前元素。