VueJs v-if / v-else
Assuming we have a Vue.js instance defined as:
You can conditionally render any html element by including the v-if directive; the element that contains v-if will only render if the condition evaluates to true:
The element will render in this case, because the variable 'a' is true. v-if can be used with any expression, computed
roperty, or function that evaluates to a boolean:
You can use a template element to group multiple elements together for a single condition:
When using v-if, you also have the option of integrating a counter condition with the v-else directive. The content contained inside the element will only be displayed if the condition of the previous v-if was false. Note that this means that an element with v-else must appear immediately after an element with v-if.
Just as with v-if, with v-else you can group multiple html elements together within a template:
The use of the v-show directive is almost identical to that of v-if. The only differences are that vshow does not support the template syntax, and there is no "alternative" condition.
The basic use is as follows...
While v-show does not support the v-else directive to define "alternative" conditions, this can be
accomplished by negating the previous one...