Javascript is required
Michael Hoffmann LogoMichael Hoffmann

Vue Tip: When to Use v-if

Michael Hoffmann - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Jul 20, 2022
1 min read
|
422 views
Template
Vue Tip: When to Use v-if Image

During toggles, v-if entirely creates and destroys the element, including event listeners and child components:

1
<template>
2
<MyComponent v-if="showComponent" />
3
</template>

v-show creates the element and only toggles its visibility using CSS.

1
<template>
2
<MyComponent v-show="showComponent" />
3
</template>
Info

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often and v-if if the condition is unlikely to change at runtime.


If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:

New Vue & Nuxt tips delivered to your inbox:
I will never share any of your personal data.