Vue.js 2 Web Development Projects

Conditional templates with v-if

We need one last thing before testing our change; the main and preview panes shouldn't be displayed if no note is selected--it would not make sense for the user to have an empty editor and preview pane pointing to nothing, and it would make our code crash since selectedNote would be null. Thankfully, the v-if directive can dynamically take parts out of the template when we want. It works just like the JavaScript if keyword, with a condition.

In this example, the div element will not be in the DOM at all while the loading property is falsy:

<div v-if="loading">
  Loading...
</div>

There are also two other useful directives, v-else and v-else-if, that will work as you might have expected:

<div v-if="loading"> Loading... ...