DEV Community

Zahid Jabbar
Zahid Jabbar

Posted on

4 1

V Show Difference between v-if and v-show in Vue.js

🔍 v-if and v-show are Vue.js directives and they are used to show the information depending upon certain conditions that are defined by the user

👉 In case you're not familiar with Vue.js directives, they are just like HTML attributes but they're always prefixed with v- which is the indication that they're special attributes provided by Vue.js. They apply reactive behavior to DOM.

👨‍💻 Let's learn the difference between two with some code:

v-if

Let's suppose we have this piece of code

<div id="app">
  <span v-if="show">Learning about v-if</span>
</div>

Enter fullscreen mode Exit fullscreen mode
var app = new Vue({
  el: '#app',
  data() {
    return {show: false}
  }
})
Enter fullscreen mode Exit fullscreen mode

In the v-if case, the element will only be rendered and inserted into DOM if the condition is true. If the condition is false and we check the DOM elements in the browser we'll notice that there is no element. But as we turn the condition to true, it's added to DOM. So, each time, depending upon the condition, there are DOM manipulations.

v-show

<div id="app">
  <span v-show="show">Learning about v-show</span>
</div>

Enter fullscreen mode Exit fullscreen mode
var app = new Vue({
  el: '#app',
  data() {
    return {show: false}
  }
})
Enter fullscreen mode Exit fullscreen mode

The element With v-show will always be rendered and it is present in the DOM but the CSS property Display: none will be toggled by v-show depending upon the condition.

🤔Which to use?

There are different use cases for both. As we've learned that with v-if the element unmount and remount depending upon the condition and there is so much work to do for DOM manipulations. But with v-show it just stays in the DOM there is not much work to do, so it's more performant.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay