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

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>

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>

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!