Vue.js 2 Design Patterns and Best Practices

v-else

A common pattern when showing or hiding elements is to instead show a different piece of content. Whilst we could use v-if or v-show multiple times, we also have access to the v-else directive, which can be used directly after showing or hiding the element.

Let's take a look at this in more detail:

<article v-if="admin">  <header>Protected Content</header>  <section class="main">    <h1>If you can see this, you're an admin!</h1>  </section></article><article v-else>  <header>You're not an admin!</header>  <section class="main">    <h1>Perhaps you shouldn't be here.</h1>  </section></article>

By adding the v-else directive to the second <article>, we're telling Vue that we want to show this DOM element whenever the first condition is hidden. Because ...