There are two ways to conditionally show or hide UI elements in Vue -
v-if. Learn which option to use where.
v-show to show an element on the UI based on given condition. The element is present in the DOM, but will have class set to
display: none. This hides the element from user. Any scripts or back-end manipulation can still access the element.
<template> <span v-show="isTrue">Message</span> <span v-show="showMessage = true">Message</span> </template>
v-if to completely hide the element based on given condition. The element is not part of the DOM and is not accessible to human or system.
<template> <span v-if="iExist">Message</span> </template>
What should I use?
If you want to hide the variable, use
v-if. If you want to hide the variable but have it available for back-end logic, use
Similar to the example above, we also selectively hide or show components. Using
v-if does not initiate component and it does not count in the UI load time.
v-show hides component but UI will wait for the component load (unless it is
v-if can be a powerful tool when combined with complementary
v-else. You could go crazy with conditional rendering that is simply not practical in