Directives are vue-specific attributes for instructing Vue to operate on a DOM element. Vue has several directives for performing different operations. However, some directives execute similar effects on DOM elements through different operational modes. V-if and v-show are two vue directives with similar impacts on DOM elements. They display values based on the truthy value of a background comparison. As a beginner, you may find these two directives confusing and experience difficulties in selecting one for a particular situation. In this article, you will learn the differences between v-if and v-show and the appropriate scenario each applies.

V-if

As the name implies, v-if performs JavaScript if operation.

const x = 1;
if (x === 2) true;
// No result

This code block will return no value because ‘x is not equal to 2’, and there is no alternative for the code block to replace. The code block might have returned another value if an else statement was coupled to the if statement.

Similarly, v-if returns a DOM element if the compared values return a truthy value. If not, it returns nothing.

<div v-if="showMessage">
  This is a message.
</div>

V-show

V-show works similarly to JavaScript if statement operation. It returns a DOM element if the compared operand returns a truthy value. Unlike v-if, which does not return any DOM element if its result is false, v-show returns the DOM element but sets its CSS display property value to false.

<div v-show="showMessage">
  This is a message.
</div>

If you inspect the elements using the browser inspect, a falsy v-if value DOM element does not appear at all while it appears in v-show with a style attribute of display: none; property and value, respectively.

V-show or V-if

A significant distinction between v-show and v-if is how each directive functions behind the scenes. Unlike v-show, which conditionally displays an element, v-if conditionally renders an element. Complementing the previous statement, v-if creates the div element when its condition is true and destroys it when its condition changes to false, while v-show only toggles the CSS display property between a defined visible value (block, flex, grid, inline-block, inline-flex, inline-grid) and none. Since both directives have similar visibility effects on an element, why need two? The vue team provided two because of how each directive is designed to work and their effects on the browser. v-if is designed for infrequent conditional changes such as a modal component. It has a high toggle cost and can affect the browser’s performance if used for frequently changing conditions. In addition, it can be coupled with an if-else block as in v-else-if and v-else, similar to JavaScript if-else statements and can also be used on Vue’s <template> tag directly, both of which are unavailable to v-show. v-show is the opposite of v-if in terms of their use case. It is best for frequently changing operations, such as input field validations in form components. v-show has a high render cost as it needs to be initially built together with other application elements, unlike v-if, which only gets created when its condition is true. In essence, when considering which to use between the two, check the change frequency of the condition. If it is high, use v-show, and if otherwise, go for v-if.

Conclusion

In this article, you have explored the v-if and v-show directives and how they function similarly on the website but have different implementations in the background. Also, you have seen the use case applicable to each directive and examples to facilitate your understanding.

I hope you make good use of this newly acquired knowledge and share it with others. Reach out to me on X (Twitter) if you have any questions, or drop them in the comment section.