Using V-Show To Render Elements in Vue

In today’s post, we will be looking at another conditional rendering directive in Vue called v-show.

Conditional Rendering in Vue

We have seen how important it is to be able to display elements in your components based on preset conditions. Vue.js makes it easy to do this with a few directives that you can start using today without any learning curve at all. In our last post, we saw the v-if, v-else and v-else-if directives, and we have also looked at v-for for looping. Today we will look at the v-show directive as one of the directives used in Vue for conditional rendering.

Before We Start

You will need to have these installed:

• Node.js
• A code editor: Visual Studio Code is highly recommended (here’s why)
• Vue CLI 3.0

Getting Started

Let’s open VS Code and create a new Vue project using the terminal with this command:

vue create conditionals

Follow the prompt and a new project will be created for you in the folder of your choice. Make sure it works well by using the CLI to run the dev command:

npm run serve

It should display the scaffold of a template Vue.js application in your browser. To clean up the application for our use, navigate to the app.vue file and replace the content with the code block below:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Welcome to your Vue app</h1>
  </div>
</template>
<script>
export default {
  name: 'app',
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Now let us take a look at the v-show directive and see how it works.

V-Show

This directive is very similar to the v-if directive—elements it is attached to show in the DOM when the preset conditions are met, and, if they are not, the element will not show.

To see it in action, copy in the code block below inside the app.vue component:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Welcome to your Vue app</h1>
  <div v-show="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </div>
    
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return {
      figure:5,
      loginType: 'username'
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here we created a variable called loginType and then initialized it to username, we also put in a header tag and attached a v-show directive to it.

npm run serve

Differences Between V-If and V-Show

You might be wondering how different v-if is from v-show. They are not that different—however, there are a few things to note while deciding which of them to use. Firstly, with v-show you cannot have v-else or v-else-if layering, which means you only test for one condition using one v-show block.

<template v-show="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
</template>

Another thing is that you cannot use v-show for template elements like the code block above. This means you have to use div tags if you want to show more than one element.

Finally, when the preset conditions are not met, v-if is removed from (commented out of) the DOM entirely, while for v-show, the element stays in the DOM—Vue only sets its CSS display value to none. This should guide you to pick the one that best fits your use case.

Adding More Conditions

Using v-show to add more conditions can look like the code block below:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Welcome to your Vue app</h1>
<div v-show="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </div>
    <div v-show="loginType === 'usernam'">
      <label>Email</label>
      <input placeholder="Enter your email address">
    </div>
    <button @click="toggleFunction()"> Toggle</button>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return {
      figure:5,
      loginType: 'username'
    }
  },
  methods: {
    toggleFunction(){
      if (this.loginType == 'username') {
        this.loginType = 'usernam'
      } else
      this.loginType = 'username'
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style> 

Here we are using two v-show directives to test for two conditions: We put in a button, and, on click, we created a function to be called. This function toggles the value of loginType. You can see it displays exactly as we expect it to.

Using Keys

Vue.js reuses things like the input tag we have in our application to make the application efficient, but sometimes you actually want renders to be done from scratch. Take a look at the code block for instance:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

You’ll see the input value stays in the box even after a toggle event happens. To force Vue to re-render the input from scratch, use keys.

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

Conclusion

We have seen how the v-show directive works and why it is important for rendering elements on preset conditions using Vue directives. We have also seen instances where v-show is different from v-if and when to use them with illustrations. I hope you begin to use v-show often moving forward. Happy hacking!