Displaying, Looping, Searching, and Filtering Data Chapter 2The 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.
<div id="app">
<div v-if="isVisible">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</div>Adding the preceding HTML to your app space will only show one of the
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:
<div id="app">
<div v-if="isVisible">
Now you see me
</div>
<div v-else-if="otherVisible">
You might see me
</div>
<div v-else>
Now you don't
</div>
</div>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.