vue方法的麻烦
为学校做一些vue.js挑战，并在应悬停的功能上遇到麻烦。 每次徘徊时，我都需要带有“红箱”类的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;
}
}
});
关于为什么不起作用的任何提示？现在，当我徘徊在广场上时，什么都不会发生。
doing some Vue.js challenges for school and having trouble with a function that should trigger on a hover.
I need the div with the class 'redBox' to grow 10 pixels taller each time it is hovered over.
Here's my code:
<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;
}
}
});
Any tips as to why this doesn't work? Right now nothing happens when I hover over the square.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试使用V-ON：MouseOver而不是V-ON：悬停。另外，您的功能似乎名为HoverBox而不是HoverGrow。因此，v-on：mouseover =“ hoverbox（）;”应该在您的Redbox Div中工作。
Try using v-on:mouseover instead of v-on:hover. Also your function appears to be named hoverBox not hoverGrow. So v-on:mouseover="hoverBox();" should work in your redBox div.