Transitioning between more than two elements

We can expand on the recipe we just completed in a straightforward manner.

Let's suppose that if we kiss the princess too many times, she will turn into Santa Claus, which may or may not be appealing, depending on your age I guess.

First, we add the third element:

<transition name="fade">   <p v-if="kisses < 3" key="frog">frog</p>   <p v-else-if="kisses >= 3 && kisses <= 5" key="princess">princess</p>   <p v-else key="santa">santa</p> </transition>

We can launch the application immediately and when ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.