The v-if
directive and the v-show
directive can dynamically control the display and hiding of DOM
elements based on their values. v-if
and v-show
are commonly used directives internally in Vue. The responsibility of a directive is to apply some special behavior to the DOM
when the value of an expression changes.
The v-if
directive is used to conditionally render a block of content, which will only be rendered when the expression of the directive returns a truthy value.
<div v-if="show">show</div>
<div v-else>hide</div>
The usage of the v-show
directive is similar, but the difference is that the element with the v-show
directive will always be rendered and kept in the DOM
. v-show
simply toggles the CSS property display
of the element.
<div v-show="show">show</div>
- Implementation:
v-if
dynamically adds or removesDOM
elements within theDOM
tree, whilev-show
controls visibility by setting thedisplay
style property ofDOM
elements. - Compilation process:
v-if
toggle involves a partial compilation and unmounting process; during the toggle process, the internal event listeners and child components are properly destroyed and rebuilt. On the other hand,v-show
simply toggles based onCSS
. - Compilation condition:
v-if
is lazy; if the initial condition is false, nothing will be done. Partial compilation only starts when the condition first becomes true.v-show
is compiled under any condition, and then cached, whileDOM
elements are retained. - Performance cost:
v-if
has higher toggle cost, whilev-show
has higher initial rendering cost. - Use cases:
v-if
is suitable for situations where the condition is less likely to change, whilev-show
is suitable for frequently changing conditions.
https://github.com/WindrunnerMax/EveryDay
https://cn.vuejs.org/v2/guide/conditional.html#v-if
https://www.cnblogs.com/dengyao-blogs/p/11378228.html
https://cn.vuejs.org/v2/guide/conditional.html#v-show