Conditional Rendering

Conditional rendering is the process of rendering element only if a specific condition is met. Vue makes the this process simple through the use of the v-if directive.

v-if

The v-if directive is use to conditionally render an element. The element will only be rendered if the directive's expression returns a truthy value.

const app = Vue.createApp({
  data: function () {
    return { see: true }
  }
})

const vm = app.mount('#app')

<div id="app">
  <span v-if="see">Now you see me</span>
</div>

v-else

The v-else directive can be added, which will be rendered if the expression of the previous v-if returns falsy.

const app = Vue.createApp({
  data: function () {
    return { clicked: false }
  }
})

const vm = app.mount('#app')

<div id="app">
  <div v-if="clicked">
    Yay! You clicked the button.
  </div>
  <div v-else>
    Click the button.
  </div>
</div>

Try it yourself on CodePen