In Vue.js, conditional rendering is achieved by using a set of directives on elements in the template.
v-if
Element displays normally when condition is true
. When the condition is false
, only partial compilation occurs and the element isn't rendered into the DOM until the condition becomes true
.
v-else
Does not accept a condition, but rather renders the element if the previous element's v-if
condition is false
. Can only be used after an element with the v-if
directive.
v-show
Behaves similarly to v-if
, however, the element will always be rendered into the DOM, even when the condition is false
. If the condition is false
, this directive will simply set the element's display
style to none
.