Passage de la souris ou passez vue.js

Question

Passage de la souris ou passez vue.js

Je voudrais montrer un div lors du survol d'un élément dans vue.js. Mais je peux sembler me faire travailler.

On dirait qu'il n'y a pas d'événement pour hover ou mouseover i vue.js peut-il vraiment être vrai?

Serait-il possible de combiner les méthodes jQuery hover et vue?

37

javascript vue.js

demandé sur Anders Andersen 2015-06-18 12:45:00

8 réponses

score 27 · Answer 1

Voici un exemple de ce que je pense que vous demandez.

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

score 100 · Answer 2

Je pense que les logiques ci-dessus pour hover sont incorrectes. il inverse juste quand la souris plane. j'ai utilisé le code ci-dessous. il semble fonctionner parfaitement bien.

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

Sur l'instance vue

data : {
    upHere : false
}

J'espère que cela aide

score 64 · Answer 3

Il n'y a pas besoin d'une méthode ici.

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

score 12 · Answer 4

Pour afficher des éléments enfants ou frères, c'est possible uniquement avec CSS. Si vous utilisez :hover avant combinators (+, ~, >, space). Ensuite, le style ne s'applique pas à l'élément plané.

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

score 4 · Answer 5

Avec mouseover seul l'élément reste visible lorsque la souris quitte l'élément survolé, j'ai donc ajouté ceci:

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

score 1 · Answer 6

Je suis venu avec le même problème ,et je le travaille!

        <img :src='book.images.small' v-on:mouseenter="hoverImg">

score 1 · Answer 7

Avec les événements mouseover et mouseleave, vous pouvez définir une fonction de basculement qui implémente cette logique et réagir sur la valeur du rendu.

Cochez cet exemple:

var vm = new Vue({
	el: '#app',
	data: {btn: 'primary'}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div id='app'>
    <button
        @mouseover="btn='warning'"
        @mouseleave="btn='primary'"
        :class='"btn btn-block btn-"+btn'>
        {{ btn }}
    </button>
</div>

score 0 · Answer 8

Il y a un jsfiddle de travail correct: http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>

Las etiquetas más populares

Passage de la souris ou passez vue.js

8 réponses