vue.js如何切换鼠标悬停上的html标记显示?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (821)

我可以切换鼠标切换事件中段落的显示,但是当鼠标悬停结束时,如何回到最初的段落呢?

HTML

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

JS脚本

new Vue({
  el: '#app',
  data () {
    return {
      displayInfo: false
    }
  },
    methods: {
      toggleInfo () {
       this.displayInfo = !this.displayInfo
      }
    }
})
提问于
用户回答回答于

你正在切换显示信息mouseover,现在你还必须打开它。

<v-btn v-on:mouseover="toggleInfo" v-on:mouseleave="toggleInfo" dark small round color="green">2018</v-btn>

扫码关注云+社区

领取腾讯云代金券