问vue.js如何在鼠标悬停时切换html标记显示

EN

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap justify-space-around>
        <v-flex d-flex xs12 sm3 md3>
          <v-card class="flexcard" color="white" tile flat>
            <v-card-title class="layout justify-center">
              <div class="headline mt-1 mb-1 display-1 text-xs-center">MEMBERSHIP FEES</div>
            </v-card-title>
            <v-card-text class="grow">
              <v-layout row justify-space-between align-baseline>
                      <v-flex xs2>
                          <v-btn v-on:mouseover="toggleInfo" dark small round color="green">2018</v-btn>
                      </v-flex>
                      <v-flex xs9 style="text-align: left;">
                        <p v-if="!displayInfo">PAID</p>
                        <p v-else>10.00$ - February, 22nd - Bank Transfer</p>
                      </v-flex>
                    </v-layout>
            </v-card>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      displayInfo: false
    }
  },
    methods: {
      toggleInfo () {
       this.displayInfo = !this.displayInfo
      }
    }
})