How to do it...

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"> ...

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

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.