在 Vue.js 中使用悬停事件处理程序的正确方法

Question

我正在自学Vue.js，需要帮助。我现在正在练习事件处理程序。当我将鼠标悬停在它上面时，我希望红色框变宽 100px。当我用点击替换悬停时它工作正常，但不适用于悬停。如果您能指出我的代码有什么问题，将不胜感激。

<!DOCTYPE HTML>
<html>

<head>
    <title>v-on Event Handlers</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .redbox {
            width: 100px;
            height: 100px;
            background: red;
        }

        .redboxwide {
            width: 200px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" v-on:hover="redbox();">Hover over me</div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',

            data: {
                redboxhover: false
            },
            methods: {
                redbox: function () {
                    this.redboxhover = !this.redboxhover;
                }
            }

        });
    </script>
</body>

</html>

Answer 1

您需要使用 v-on:mouseover 而不是 v-on:hover。此外，您可能需要 v-on:mouseleave 进行清理。

Here you could find more info about existing Events and mouseover

Answer 2

像这样使用@mouseover：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  .redbox {
    width: 100px;
    height: 100px;
    background: red;
  }
  
  .redboxwide {
    width: 200px;
    height: 100px;
    background: red;
  }
</style>
<div id="app">
  <div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" @mouseover="redbox();">Hover over me</div>
</div>
<script>
  var app = new Vue({
    el: '#app',

    data: {
      redboxhover: false
    },
    methods: {
      redbox: function() {
        this.redboxhover = !this.redboxhover;
      }
    }
  });
</script>

Answer 3

在@tauzN 和@Alex Kosh 的帮助下，我将代码更改为以下内容。我添加了@mouseover 和@mouseleave。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  .redbox {
    width: 100px;
    height: 100px;
    background: red;
  }
  
  .redboxwide {
    width: 200px;
    height: 100px;
    background: red;
  }
</style>
<div id="app">
  <div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" @mouseover="redbox();" @mouseleave="!redbox();">Hover over me</div>
</div>
<script>
  var app = new Vue({
    el: '#app',

    data: {
      redboxhover: false
    },
    methods: {
      redbox: function() {
        this.redboxhover = !this.redboxhover;
      }
    }
  });
</script>

在 Vue.js 中使用悬停事件处理程序的正确方法

The proper way to use hover event handler in Vue.js

vue.js