v-show vs v-if: Conditional Rendering in Vue

By Syed Wahaj

Introduction

Vue.js is a popular JavaScript framework for building user interfaces. It provides a number of directives that can be used to conditionally render content. Two of the most common directives for conditional rendering are v-if and v-show.

v-if

The v-if directive is used to conditionally render a block of markup. The block will only be rendered if the directive’s expression returns a truthy value. For example, the following code will only render the <h1> element if the user variable is not null:

<h1 v-if="user">Hello, {{ user.name }}</h1>

If the user variable is null, the <h1> element will not be rendered.

v-show

The v-show directive is also used to conditionally render a block of markup, but it works differently than v-if. The v-show directive does not actually remove the element from the DOM, it simply sets the display property to none if the directive’s expression returns a falsy value. This means that the element will still be present in the DOM, but it will not be visible. For example, the following code will render the <h1> element, but it will be hidden if the user variable is null:

<h1 v-show="user">Hello, {{ user.name }}</h1>

If the user variable is null, the <h1> element will still be present in the DOM, but it will have the display: none CSS property applied to it, so it will not be visible.

Performance

The main difference between v-if and v-show is in terms of performance. When using v-if, the element will be removed from the DOM if the directive’s expression returns a falsy value. This can have a performance impact, especially if the element is large or complex.

When using v-show, the element will still be present in the DOM, even if it is hidden. This means that there is no performance impact when the directive’s expression returns a falsy value.

When to use v-if vs v-show

So, when should you use v-if and when should you use v-show? In general, you should use v-if if the condition is likely to change at runtime. This is because removing the element from the DOM can improve performance.

You should use v-show if the condition is unlikely to change at runtime. This is because there is no performance impact when the element is hidden.

Here is a table that summarizes the key differences between v-if and v-show:

Feature	v-if	v-show
Renders element	Yes	Yes
Removes element from DOM	Yes if condition is falsy	No
Performance impact	Can be slow if condition changes often	No performance impact
When to use	When condition is likely to change at runtime	When condition is unlikely to change at runtime

Example

Here is an example of how to use v-if and v-show in a Vue.js application:

<template>
  <div>
    <h1 v-if="user">Hello, {{ user.name }}</h1>
    <h1 v-show="user">Hello, {{ user.name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null,
    };
  },
};
</script>

In this example, the <h1> element with v-if will only be rendered if the user variable is not null. The <h1> element with v-show will always be rendered, but it will be hidden if the user variable is null.

Conclusion

v-if and v-show are both useful directives for conditional rendering in Vue.js. The best directive to use depends on the specific situation. If the condition is likely to change at runtime, you should use v-if. If the condition is unlikely to change at runtime, you should use v-show.