Vue 3 — Conditional Rendering
Tags: vue, webdev, beginners, javascript
Published: 2020-10-17 01:03:13

---
title: Vue 3 — Conditional Rendering
published: true
date: 2020-07-26 01:29:59 UTC
tags: vue,webdev,beginner,javascript
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8aconditional-rendering-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258aconditional-rendering-2
---

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at conditionally rendering items with Vue.

### v-else

We can use `v-else` to display an alternative item with the value in `v-if` is falsy.

For example, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="on = !on">toggle</button>  
      <h1 v-if="on">hello</h1>  
      <h1 v-else>bye</h1>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        data() {  
          return {  
            on: true  
          };  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

When we toggle `on` to `true` , the ‘hello’ is displayed.

Otherwise, ‘bye’ is displayed.

`v-else` must immediately follow a `v-if` or a `v-else-if` element.

Otherwise, it won’t be recognized.

### Conditional Groups with `v-if` on `<template>`

`v-if` can be used on `template` so that we can conditionally display a group of elements.

For example, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="on = !on">toggle</button>  
      <template v-if="on">  
        <h1>Title</h1>  
        <p>Paragraph 1</p>  
        <p>Paragraph 2</p>  
      </template>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        data() {  
          return {  
            on: true  
          };  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We have the `v-if` added to the `template` so that we can toggle everything inside all at once.

### `v-else-if`

We can use `v-else-if` to display something if a case is `true` .

For example, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <div v-if="type === 'a'">  
        a  
      </div>  
      <div v-else-if="type === 'b'">  
        b  
      </div>  
      <div v-else-if="type === 'c'">  
        c  
      </div>  
      <div v-else>  
        something else  
      </div>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        data() {  
          return {  
            type: "a"  
          };  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We have the `v-else-if` directive to display the different items according to the value of `type` .

Since we set it to `'a'` , we’ll see ‘a’ displayed.

`v-else-if` must be immediately after `v-if` or another `v-else-if` element.

### `v-show`

The `v-show` directive also lets us conditionally rendering items on the screen.

But the difference is that `v-show` elements always render on the DOM and it’s hidden with CSS if its value is falsy.

`v-show` doesn’t support the `template` element and can’t be used with `v-else` .

For example, we can use it by writing:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="on = !on">toggle</button>  
      <h1 v-show="on">hello</h1>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        data() {  
          return {  
            on: true  
          };  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We have the `v-show` directive which will toggle the CSS `display` property to show or hide the h1 element.

### `v-if` vs `v-show`

`v-if` is real conditional rendering because all the event listeners and child components are destroyed when they aren’t rendered.

`v-if` is lazy, so if its value is falsy, it won’t be rendered until it becomes `true` .

`v-show` is much simpler, it just toggles the `display` CSS property to change the display.

`v-show` is better if we need to toggle something often and `v-if` is good for other cases.

### Conclusion

We can use `v-if` and `v-show` to conditionally render items.

`v-if` changes the DOM structure, and `v-show` changes the CSS only.

The post [Vue 3 — Conditional Rendering](https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8aconditional-rendering-2/) appeared first on [The Web Dev](https://thewebdev.info).