轻松分别vue.js里的v-if和v-show属性

Question

两者的相同处:控制元素的显示和隐藏；
两者的不同是实现的原理不同:v-if是DOM级操作，通过删除和重新创建元素达到显示和隐藏的目的，而v-show是通过改变样式即改变元素的display:none样式来实现隐藏，再清除样式实现显示。

Answer 1

兄弟，容我补充一点，两者的使用场景是，如果元素动态变化不大，且注重页面加载效率的，建议使用v-if，因为v-if第一次加载如果条件不成立，它就直接不渲染元素了，加载时间更短一些。如果元素动态变化大，DOM频繁操作就比较慢了，建议使用v-show，但是使用v-show的话，DOM元素一定是加载的，所以前期整个页面加载肯定要慢一些。