Vue中visibility display v-if v-show比较

display: none

1. 给一个元素设置了display: none后，该元素及其后代元素均会被隐藏。且重写后代元素的display属性无效。
2. 该元素及其后代元素均不占用原空间，隐藏后的元素无法点击。

visibility:hidden

1. 给元素设置visibility: hidden后，该元素隐藏。其子元素默认继承父元素visibility属性，但子元素若重写属性，则不受父级影响。
2. 该元素隐藏后，仍保持占位。隐藏部分无法点击，可见的子元素可以点击。

display: none和visibility:hidden区别

• visibility:hidden保持占位；display: none不保持占位
• visibility:hidden设置后，其子元素可通过设置visibility:visible来单独控制子元素显示； display: none设置后，其子元素重写display属性无效，均隐藏。

display: none和visibility:hidden共同点

• 对应的标签仍存在DOM结构中，均可控制显隐

v-if和v-show区别

• 初始值为false时，v-if不会编译，v-show会编译并设置display:none
• v-show只编译一次，通过控制display:none来控制显隐，始终可以在DOM中获取对应标签；v-if的显隐切换则是通过动态的向DOM树内添加或者删除DOM元素，所以v-if="false"时，无法在DOM中获取该标签。