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 表示以上条件都不成立,执行当前,即展示当前元素。