面试之v-if v-show

面试必问之v-if和v-show的区别是什么？

v-if

1. v-if是动态的向DOM添加或删除元素
2. v-if在false的情况下获取不到DOM元素，不占位
3. v-if是真正的条件渲染，不满足条件时DOM直接被删除

v-show

1. 给DOM加上v-show="false" 则会在DOM上加上一个内联样式style="display: none;"不占位，布局塌陷。

<div style="display: none;">123</div>

2. 如果有class或者id定义了外部样式，则设置v-show= "true" 无效

<!--此时div还是处于display: none;状态-->
<div class="test" v-show= "true">123</div> 


.test{
    display: none;
}

3. v-show只改变内联样式

<!--此时DOM正常显示-->
<div v-show="true" style="display: none"></div>

4. v-show="false"时还可以获取到DOM，其自身与后代节点不再生成盒模型以占位，且重写子节点display属性无效，但html节点并没有真的被删除。

当你说到这里，面试官开始进行死亡追问：那么他们和visibility有什么区别？

动态绑定visibility，通过修改“visibility”属性实现显示切换，也可实现不同条件显示和隐藏的功能

1. visibility:hidden可让元素生成不可见盒，元素虽不可见，但仍生成盒模型，保持占位，布局不塌陷，绑定的事件失效。
2. 子元素默认继承父元素visibility属性，但子元素若重写属性设置visibility：visible，则不受父级影响，子元素可见，并且这时绑定在父元素上的事件在子元素上可触发。

和opacity的区别呢？

1. opacity属性仅改变元素的透明度，不影响元素的占位。
2. opacity属性不可继承，但父元素的opacity会影响后代。后代元素的opacity取最小值显示。若 父元素opacity为0，后代为1，则0生效。若父元素为1，后代为0.5，则0.5生效。且opacity属性不影响事件触发，即opacity为0时，事件绑定仍有效。