v-if

• event listeners and child components inside the conditional block are destroyed and re-created during toggles.
• can group on<template>. The rendered result will not include the<template>element.

<template v-if="isShow">
  <div>
    <p>Hello</p>
  </div>
  <button>
      Say Hi
  </button>
</template>

• can use togetherv-else-ifandv-else

v-show

• always rendered and remains in the DOM regardless of initial condition
• only toggles the display CSS property of the element.
• does not supporttemplateandv-else

<template>
    <h1 v-show="isShow">
        Hello world
    </h1>
</template>

In short

Usev-showif you need to toggle something very often. Usev-ifif you need to toggle something more conditionally.

Happy Vue-ing! 🎇