There are two ways to conditionally show or hide UI elements in Vue - v-show and v-if. Learn which option to use where.

v-show

Use 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.

1
2
3
4

<template>
  <span v-show="isTrue">Message</span>
  <span v-show="showMessage = true">Message</span>
</template>

v-if

Use 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.

1
2
3

<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 v-show.

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
async).

Further, v-if can be a powerful tool when combined with complementary v-ifs and v-else. You could go crazy with conditional rendering that is simply not practical in v-show.