Vorrei mostrare un div quando si passa un elemento in vue.js. Ma posso sembrare che io lavori.Mouseover o hover vue.js
Sembra che non ci siano eventi per hover o mouseover in vue.js, può essere vero?
Sarebbe possibile combinare jover hover e metodi vue?
Ecco un esempio funzionante di ciò che penso stiate chiedendo.
http://jsfiddle.net/JrodR87/1cekfnqw/3/
<div id="demo">
<div v-show="active">Show</div>
<div v-on="mouseover: mouseOver">Hover over me!</div>
</div>
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function(){
this.active = !this.active;
}
}
});
non funziona con la versione di Vue più recente. @CYB ha provato a modificare la tua risposta a 'v-on: mouseover =" mouseOver "' ma non ha menzionato in quale versione di vue la sintassi è cambiata – Aprillion
@NICO ha una soluzione migliore della mia e funziona con la versione corrente (1.0.26 al momento di questo post). Si prega di fare riferimento alla sua risposta. Grazie. – Jarrod
Vorrei cancellare questo dato che ho appena dichiarato, il post sottostante di @NICO è migliore del mio e più aggiornato. Per favore, dai a NICO la risposta corretta e io cancellerò il mio. Grazie! – Jarrod
Non c'è necessità di un metodo qui.
HTML
<div v-if="active">
<h2>Hello World!</h2>
</div>
<div v-on:mouseover="active = !active">
<h1>Hover me!</h1>
</div>
JS
new Vue({
el: 'body',
data: {
active: false
}
})
Puoi usare" v-on: mouseover' o il collegamento '@ mouseover' per i documenti http://vuejs.org/guide/syntax .html # v-on-Shorthand –
Puoi sostituire 'on' con' v-on: 'o' @ 'per uno qualsiasi degli attributi di evento html. http://www.w3schools.com/tags/ref_eventattributes.asp –
Qual è il problema? Questo funziona e dovrebbe essere contrassegnato come la risposta corretta. – NICO
Per mostrare elementi figlio o di pari livello è possibile solo con i CSS. Se si utilizza :hover prima dei combinatori (+, ~, >, space). Quindi lo stile si applica non all'elemento al passaggio del mouse.
HTML
<body>
<div class="trigger">
Hover here.
</div>
<div class="hidden">
This message shows up.
</div>
</body>
CSS
.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }
L'interrogante chiede specificamente a vue.js. Poiché consente a javascript di essere facilmente associato all'evento mouseover. –
Sto usando Vue e questa è la soluzione migliore per me. Ho un elenco annidato con pulsanti che dovrebbero essere visualizzati solo al passaggio del mouse e l'utilizzo di variabili aggiuntive per tracciare lo stato di passaggio del mouse è eccessivo. I CSS sono molto più eleganti. Grazie qsc! –
Mi sento logiche di cui sopra per il passaggio del mouse non è corretto. è solo inverso quando il mouse si libra. ho usato sotto il codice. sembra funzionare perfettamente bene.
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
su istanza vue
data : {
upHere : false
}
Speranza che aiuta
Questa dovrebbe essere la risposta accettata! La risposta accettata e quella a cui è stata forzata la risposta più alta si traducono in un componente tremolante. Ogni movimento del cursore sul @ mouseover-div inverte lo stato corrente ... –
Se stai mostrando un div nascosto come un fumetto, avrai lo sfarfallio del mouseover. Basta aggiungere lo stesso fantastico mouseover/mouseleave al div nascosto. – mcmacerson
Questa è la migliore risposta, grazie –
mi si avvicinò con lo stesso problema, e io lavoro fuori!
<img :src='book.images.small' v-on:mouseenter="hoverImg">
v-on direttiva lavori per l'evento "hover" anche. Se aggiungi alla tua domanda il codice che hai scritto, probabilmente possiamo aiutarti a farlo funzionare. E sì, Vue è semplice e piccolo e pensato per essere integrato con altri pacchetti come jQuery. –