1.先看看成果
2.来看看代码
3.一一击破
(1)v-show:管制元素的display属性是否为none
(2)v-if:管制是否在页面上增加或删除dom元素
(3)opacity: 0;:css属性,管制元素的透明度
(4)display: none;:css属性,管制dom元素是否显示
4.性能上:
(1)两者都会导致页面的重绘和重排,但v-show只是扭转dom的css,而v-if管制的是增加和删除dom,所以v-if在重绘重排前还进行了增加或删除dom元素的操作。
(2)须要屡次切换某个元素的显示或暗藏时应用v-show
(3)某个元素在渲染后就始终存在或暗藏时应用v-if
(4)opacity也能够暗藏元素,但它自身的作用并非用来暗藏元素而是设置元素的透明度,并且opacity为0时,该dom同样占用着空间。