为学校做一些Vue.js挑战，在一个应该在悬停时触发的函数上遇到麻烦。我需要类'redBox'的div增长10像素高每次它被悬停。
下面是我的代码:
<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>
.box{width:200px; height:200px; background:green; border:2px solid black; text-align:center; line-height:200px; color:white;}
.hidden{display:none;}
.redBox{width: 100px; height: 100px; background-color: red; margin: 2em;}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{box:true, hidden:boxHidden}">{{message}}</div>
<button v-on:click="showhide();">{{buttonText}}</button>
<div class="redBox" v-on:hover="hoverGrow();"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
boxHeight:200,
boxHidden : false,
message : 'Make me disappear!',
buttonText : "Hide",
hovered: false,
},
methods:{
showhide : function(){
console.log(this.boxHidden);
if(this.boxHidden){
this.boxHidden=false;
this.buttonText="Hide";
}else{
this.boxHidden=true;
this.buttonText="Show";
}
},
hoverBox : function(){
this.boxHeight = boxHeight + 10;
}
}
});
关于为什么这不起作用有什么提示吗?现在，当我将鼠标悬停在这个正方形上时，什么也没有发生。
尝试使用v-on:mouseover而不是v-on:hover。此外，您的函数似乎被命名为hoverBox而不是hoverGrow。所以v:鼠标悬停="hoverBox();">