How to use v-on:keyup to listen to keyboard events in Vue

In Vue, we can use the v-on directive to bind event listeners, where v-on:keyup can monitor the pop-up event of the keyboard key.

The v-on directive is an event binding directive provided by Vue, which can be used to listen to DOM events. Its general syntax is: v-on: event name="callback function", where the "event name" refers to the standard event or custom event name supported by the DOM element, and the "callback function" is executed when the event is triggered. The function.

When listening to keyboard events, we can use the v-on:keyup instruction, which can trigger the callback function when the keyboard key pops up. The specific usage is as follows:

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

In the above code, we bind a v-on:keyup.enter event to the input element, which means monitoring the event of the keyboard enter key popping up. When the user presses the enter key in the input box and pops it up, Vue will automatically trigger the callback function sendMessage and pass in the content of the input box as a parameter.

In addition to the enter key, we can also monitor the pop-up events of other keyboard keys. For example:

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

In the above code, we bind a v-on:keyup.esc event to the input element, which means monitoring the event of the keyboard esc key popping up. When the user presses the esc key in the input box and pops it up, Vue will automatically trigger the callback function cancelMessage, which clears the contents of the input box.

In general, it is very convenient to use v-on:keyup to monitor keyboard events in Vue. You only need to bind the event to the DOM element that needs to be monitored. At the same time, Vue also supports monitoring other forms of keyboard events, such as v-on:keydown and v-on:keypress. You can refer to the official documentation for use when needed.

The above is the detailed content of How to use v-on:keyup to listen to keyboard events in Vue. For more information, please follow other related articles on the PHP Chinese website!