v-else

v-else allows you to render an alternative element based on the opposite of the v-if statement. If that results in true, the first element will be displayed; otherwise, the element containing v-else will. 

The element with v-else needs to directly follow the one containing v-if; otherwise, your application will throw an error.

v-else has no value and is placed within the element tag.

      <p id="app">
        <p v-if="isVisible">
          Now you see me
        </p>
        <p v-else>
          Now you don't
        </p>
      </p>

Adding the preceding HTML to your app space will only show one of the <p> elements – toggling the value in your console as we did earlier will reveal the other container. You can also use v-else-if should you wish to chain your conditions. An example of v-else-if is as follows:

      <p id="app">
        <p v-if="isVisible">
          Now you see me
        </p>
        <p v-else-if="otherVisible">
          You might see me
        </p>
        <p v-else>
          Now you don't
        </p>
      </p>

You might see me will be displayed if the isVisible variable equates to false, but the otherVisible variable equates to true.

v-else should be used sparingly as can be ambiguous and might lead to false positive situation.