vue status change how to make a partial page rendering

Restore problem : I need to change the status showFlag according to business needs, two control modules to display hidden, but rendered the initial state of the module are no problem, but the second switch is not re-render the page

 

Problem Solving :

with

The v-show modified to v-if, v-if re-render the page, which issues have been resolved.

v-if和v-show的区别是什么呢？

1.v-if:是条件渲染，每次都会重新删除或者创建元素，v-if有较高的切换性能消耗。

2.v-show:每次不会重新进行DOM删除和创建操作，只是切换元素的display:none样式，有较高的初始渲染消耗。

提示：如果元素涉及到频繁的切换，最好不要使用v-if而用v-show,如果可能永远被用户看到则用v-if