时间戳

首页 > 解决方案 > vue.js如何在鼠标悬停时切换html标签显示

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

问题描述

我可以在鼠标悬停事件上切换段落的显示，但是当鼠标悬停结束时如何返回到初始段落..？

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

见pen.io 测试

标签： vue.js

解决方案

您正在打开 displayInfo mouseover，现在您还必须打开它mouseleave。

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

推荐阅读