Maison > interface Web > Voir.js > Comment utiliser v-on:keyup pour écouter les événements du clavier dans Vue

Comment utiliser v-on:keyup pour écouter les événements du clavier dans Vue

王林
Libérer: 2023-06-11 17:42:42
original
3084 Les gens l'ont consulté

Dans Vue, nous pouvons utiliser la directive v-on pour lier les écouteurs d'événements, où v-on:keyup peut surveiller l'événement contextuel de la touche du clavier.

La directive v-on est une directive de liaison d'événements fournie par Vue, qui peut être utilisée pour écouter les événements DOM. Sa syntaxe générale est la suivante : v-on : event name="callback function", où le "event name" fait référence à l'événement standard ou au nom d'événement personnalisé pris en charge par l'élément DOM, et la "callback function" est exécutée lorsque l'événement est fonction déclenchée.

Lors de l'écoute des événements du clavier, nous pouvons utiliser la commande v-on:keyup, qui peut déclencher la fonction de rappel lorsque la touche du clavier apparaît. L'utilisation spécifique est la suivante :

<template>
  <div>
    <input v-model="message" v-on:keyup.enter="sendMessage">
    <!-- keyCode为13表示enter键 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      console.log('message:', this.message)
    }
  }
}
</script>
Copier après la connexion

Dans le code ci-dessus, nous avons lié un événement v-on:keyup.enter à l'élément d'entrée, ce qui signifie surveiller l'événement de l'apparition de la touche Entrée du clavier. Lorsque l'utilisateur appuie sur la touche Entrée dans la zone de saisie et la fait apparaître, Vue déclenchera automatiquement la fonction de rappel sendMessage et transmettra le contenu de la zone de saisie en tant que paramètre.

En plus de la touche Entrée, nous pouvons également surveiller les événements contextuels d'autres touches du clavier. Par exemple :

<template>
  <div>
    <input v-model="message" v-on:keyup.esc="cancelMessage">
    <!-- keyCode为27表示esc键 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    cancelMessage() {
      this.message = ''
    }
  }
}
</script>
Copier après la connexion

Dans le code ci-dessus, nous lions un événement v-on:keyup.esc à l'élément d'entrée, ce qui signifie surveiller l'événement de l'apparition de la touche échap du clavier. Lorsque l'utilisateur appuie sur la touche Échap dans la zone de saisie et la fait apparaître, Vue déclenchera automatiquement la fonction de rappel CancelMessage, qui efface le contenu de la zone de saisie.

En général, il est très pratique d'utiliser v-on:keyup pour surveiller les événements du clavier dans Vue. Il vous suffit de lier l'événement à l'élément DOM qui doit être surveillé. Dans le même temps, Vue prend également en charge la surveillance d'autres formes d'événements de clavier, tels que v-on:keydown et v-on:keypress. Vous pouvez vous référer à la documentation officielle pour l'utiliser en cas de besoin.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal