vue la souris se déplace dans l'événement de suppression

Vue.js est un framework front-end très pratique et facile à utiliser. Il est basé sur le modèle MVVM et il est très facile d'obtenir des effets dynamiques sur la page pendant le processus de développement. Dans Vue.js, les événements de souris sont très courants et les événements d'entrée et de sortie de souris (mouseover et mouseout) sont également largement utilisés. Apprenons à utiliser le déplacement de la souris et à supprimer des événements dans Vue.js.

1. Événement Mouse enter

Lorsque la souris de l'utilisateur se déplace sur un élément, Vue.js déclenchera l'événement mouseenter. Dans Vue.js, nous pouvons gérer l'événement de déplacement de la souris via l'instruction v-on, comme indiqué ci-dessous :

<template>
  <div>
    <h3 v-on:mouseenter="handleMouseEnter">鼠标移入我了</h3>
  </div>
</template>
<script>
export default {
  methods: {
    handleMouseEnter () {
      console.log('鼠标移入');
    }
  }
}
</script>

Dans le code ci-dessus, nous lions l'événement de déplacement de la souris via l'instruction v-on, et le la fonction de traitement des événements est handleMouseEnter . Lorsque l'utilisateur déplace la souris sur l'élément, la fonction handleMouseEnter est déclenchée. Dans cette fonction, nous pouvons implémenter une logique métier arbitraire.

Plus précisément, dans le code ci-dessus, nous affichons simplement la phrase « mouse in » sur la console. Dans les applications réelles, nous pouvons effectuer différentes opérations en fonction des besoins de l'entreprise, comme afficher un certain élément, changer de style, etc.

2. Événement Mouse out

Correspondant à l'événement mouse in est l'événement mouse out. Dans Vue.js, nous pouvons lier l'événement mouseleave via l'instruction v-on, comme indiqué ci-dessous :

<template>
  <div>
    <h3 v-on:mouseleave="handleMouseLeave">鼠标移出我了</h3>
  </div>
</template>
<script>
export default {
  methods: {
    handleMouseLeave () {
      console.log('鼠标移出');
    }
  }
}
</script>

Dans le code ci-dessus, nous lions l'événement mouseleave via l'instruction v-on, et la fonction de traitement d'événement est handleMouseLeave. Lorsque l'utilisateur éloigne la souris de l'élément, la fonction handleMouseLeave est déclenchée. Dans cette fonction, nous pouvons également effectuer toutes opérations pour répondre aux besoins de l'entreprise.

Il convient de noter que les événements mouseenter et mouseleave sont légèrement différents des événements mouseover et mouseout. Plus précisément, les événements mouseenter et mouseleave ne seront déclenchés qu'une seule fois lorsque la souris franchit la limite de l'élément, tandis que les événements mouseover et mouseout peuvent être déclenchés plusieurs fois lorsque la souris entre et sort des éléments enfants de l'élément. Par conséquent, dans Vue.js, nous utilisons généralement les événements mouseenter et mouseleave au lieu des événements mouseover et mouseout.

3. Application complète des événements d'entrée et de sortie de la souris

En plus d'utiliser séparément l'événement d'entrée et de sortie de la souris, Vue.js peut également obtenir des effets avancés en appliquant ces éléments de manière globale. deux événements. Par exemple, nous pouvons utiliser l'instruction v-if pour afficher un élément lorsque la souris entre et masquer l'élément lorsque la souris sort, comme indiqué ci-dessous :

<template>
  <div>
    <h3 v-on:mouseenter="handleMouseEnter"
        v-on:mouseleave="handleMouseLeave">鼠标移入移出我</h3>
    <div v-if="isShow">我是要显示的内容</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleMouseEnter () {
      this.isShow = true;
    },
    handleMouseLeave () {
      this.isShow = false;
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons l'instruction v-if pour Contrôler dynamiquement l'affichage et le masquage des éléments. Lorsque l'utilisateur déplace la souris dans l'élément, nous définissons isShow sur true, affichant ainsi l'élément ; lorsque l'utilisateur déplace la souris hors de l'élément, nous définissons isShow sur false, masquant ainsi l'élément. De cette façon, nous pouvons obtenir des effets de mouvement d'entrée et de sortie de souris plus complexes.

En bref, l'événement d'entrée et de sortie de la souris dans Vue.js est très couramment utilisé et doit être utilisé fréquemment dans le développement réel. Grâce à l'explication de cet article, je pense que tout le monde a une compréhension plus approfondie des événements d'entrée et de sortie de la souris dans Vue.js et peut les utiliser de manière plus flexible dans le développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!