Since we talked about magic, we will turn a frog into a princess. The transformation itself will be a transition.
We will instantiate a button that, when pressed, will represent a kiss to the frog:
<div id="app"> <button @click="kisses++">Kiss!</button> </div>
Every time the button is pressed, the variable kisses increases. The variable will be initialized to zero, as the following code shows:
new Vue({ el: '#app', data: { kisses: 0 } })
Next, we need the frog and the princess that we will add immediately after the button:
<transition name="fade"> <p v-if="kisses < 3" key="frog">frog</p> <p v-if="kisses >= 3" key="princess"> ...
