Vue.js Conditional Rendering: v-if vs. v-show

The v-if and v-show directives let us conditionally render items on the screen—v-if via the DOM and v-show with CSS.

Vue.js is a JavaScript library used for creating interactive web frontend applications. It is one of the most popular libraries because of its easy-to-use API.

v-if and v-show are two directives that let us conditionally render items on the screen. In this article, we will take a look at how to use each of them and compare their differences.

v-if vs. v-show

On the surface, v-if and v-show do the same thing. However, they work differently underneath.

v-if conditionally renders the item and children it is applied to by adding and removing them from the DOM. If the condition we pass to v-if is true, then it will put the item and its children into the DOM and show it.

Otherwise, the item won’t be put into the DOM and it won’t be shown. It will not do anything if the condition that it is set to is false initially.

v-show works by showing and hiding the item it is applied to with CSS.

Using v-if to Conditionally Render Elements and Components

We can use the v-if directive to render elements and components conditionally. To do this, we can do something like:

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <h1 v-if="showMe">hello</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

to use v-if to show the h1 element if the attribute value we pass into v-if is true. Therefore, if showMe is true, then the h1 will be shown. Otherwise, it won’t be on the screen.

showMe is a reactive property so it will re-render the component if its value changes. Therefore, when we click Toggle, “hello” is shown if showMe is true.

We can use the v-if directive with v-else to show something else if the attribute value we pass into v-if is false. We just put the item with the v-else directive as the direct sibling of the item with the v-if directive.

For instance, we write:

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <h1 v-if="showMe">hello</h1>
  <h1 v-else>goodbye</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

to add an h1 element with the v-else directive applied to it. Then we see “goodbye” shown if showMe is toggled to false. And we see “hello” and “goodbye” alternate when we click the button.

We can also use the v-else-if directive similarly to v-else to add more cases. We just use v-else-if with an attribute value set for the condition like v-if.

For example, we write:

<template>
  <button @click="count++">Increment</button>

  <h1 v-if="count % 3 === 0">evenly divisible by 3</h1>
  <h1 v-else-if="count % 3 === 1">has remainder 1</h1>
  <h1 v-else>has remainder 2</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
};
</script>

to make the button increment the count when we click it.

And below that, we show “evenly divisible by 3” when count is evenly divisible by 3.

If count has remainder 1 when we divide it by 3, we use v-else-if to show “has remainder 1.” Otherwise, we use v-else to show “has remainder 2.”

Also, we can use v-if on the template element to let us conditionally render a group of elements.

For instance, we write:

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <template v-if="showMe">
    <h1>Hello</h1>
    <p>world</p>
  </template>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

to wrap the template around the h1 and p elements.

And we apply the v-if directive on the template element instead of the h1 and p elements individually to render the h1 and p on the screen when showMe is true.

This lets us eliminate repetitive use of the v-if directive with the same conditions.

Using v-if with v-for

The v-if directive can be used with the v-for directive to conditionally render lists.

We write:

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <template v-if="showMe">
    <h1 v-for="item of items" :key="item">{{ item }}</h1>
  </template>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
      items: [1, 2, 3, 4, 5],
    };
  },
};
</script>

to add the v-if directive to the template element that is wrapped around the list of h1s we render with v-for.

We can also put the v-if and v-for directives on the h1. If we do, then v-if is evaluated first. Therefore, it is clearer to separate v-if from the v-for directives to make the precedence clear.

Using the v-show Directive

The v-show directive does not come with analogs of v-else and v-else-if directives.

So all we can do is to use the v-show directive to render an element or component conditionally.

For instance, we write:

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <h1 v-show="showMe">Hello</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

to apply the v-show directive by setting its value to showMe.

Then when we click on Toggle, we see Hello toggled on and off with CSS.

Conclusion

The v-if and v-show directives allow us to conditionally render items on the screen.

v-if lets us conditionally render items on the screen by conditionally putting them into the DOM. If the expression we set v-if to is true, then the item will be rendered. Otherwise, it will be skipped if the condition is false initially or removed from the DOM if the condition becomes false when it is initially true.

We can also use the v-else-if and v-else directives with v-if to add more cases for conditionally rendered items.

v-show renders items conditionally with CSS. It will show the item the directive is applied to if the attribute value we set it to is true. Otherwise, the item will be hidden by CSS.