and are two ways to conditionally render content in Vue. Both are built to conditionally render content in Vue, but in slightly different ways - which can be quite confusing. Let's take a look at how they work, and when you would use each. v-if v-show v-if vs v-show in conditional rendering is the one you will want to use of the time. That's because the way works is to completely eliminate the DOM elements if the condition within it returns . For example, below we'll try to render an tag, but only if is equal to . In the below example, isn't equal to , so the will never be rendered: v-if most v-if false <h1> msg 5 msg 5 <h1> <script setup>
const msg = 6
</script>

<template>
    <h1 v-if="msg === 5">Hello World!</h1>
</template> If we made reactive, and updated it, we could conditionally render the content based on a button press, like in this code: msg <script setup>
  import { reactive } from 'vue'
    const msg = reactive({ setting: true })
  function updateMessage() {
    if(msg.setting) msg.setting = false
    else msg.setting = true
  }
</script>

<template>
    <h1 v-if="msg.setting === true">Hello World!</h1>
  <button @click="updateMessage">
    Update Message
  </button>
</template> This is fine for most cases. Loading one less DOM element is usually a better idea, and can help with some styling issues you may run into. If you try to look at your code in , you'll see that the tag we tried to render won't exist if is returning . Pretty cool, right? Inspect Element <h1> v-if false However, there are some situations where you'll want the DOM element to be rendered, though, even if returns . For example, you may want to apply some Javascript to your DOM element, even if it is supposed to be hidden. For that, you can use : v-if false v-show <script setup>
const msg = 6
</script>

<template>
    <h1 v-show="msg === 5">Hello World!</h1>
</template> The difference between and is that does not eliminate the DOM element. If the expression in returns , the element will still be rendered and exist in the document, but it will have applied to it in CSS. v-show v-if v-show v-show false display: none Other differences between v-if and v-show There are two other key differences between and : v-if v-show can be used on elements, but cannot. v-if <template> v-show also supports and clauses, whereas does not. v-if v-else v-else-if v-show Learn more about this here Conclusion and both have their uses. While will stop something being rendered if the expression within it returns , will still render the element - but it will apply to the element. v-if v-show v-if false v-show display: none . To learn more about Vue, you can check out my other articles here Also Published Here

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Conditional Rendering in Vue

Conditional Rendering in Vue

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Conditional Rendering in Vue

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES