Vue+modifier trigger event
This time I will bring you the Vue modifier triggering event, what are the precautions for the Vue modifier triggering event, the following is a practical case, let's take a look.
Key modifier
When developing on the PC side, we often encounter similar requirements, such as submitting a form when the user presses the enter key without using key modifiers. When using a character, we may listen to keyboard events and judge based on the value of keyCode
Vue adds key modifiers and system modifiers to handle similar events
/** 提交表单 */
<template>
<p class="demo">
电话号码:
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
</p>
</template>
<script>
export default {
data () {
return {
phone: '' // 电话号码
}
},
methods: {
// TODO 提交电话号码
handleSubmit () { alert(this.phone) }
}
}
</script>Remember all keyCode Values are difficult, so Vue provides aliases for commonly used keys
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />
Common button aliases
enter tab delete esc space up down left right
If these aliases cannot meet the needs, you can customize the key modifier alias through global config.keyCodes Object
Vue.config.keyCodes.x = 88
You can also convert the key name exposed by keyboardEvent.key to kebab-case as a modifier. The following two modifiers can trigger the handleSubmit event
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" /> <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />
System Modifier Key
Sometimes we need to trigger an event together with the system modifier key. It should be noted here that pressing the system modifier key alone will not trigger the corresponding event
The system modifier keys include the ctrl alt shift meta key. For different keyboards, the four system modifier keys correspond to different ones. For the mac system keyboard, the meta key corresponds to the command key, and in the windows system keyboard it corresponds to the ⊞ key
In the following example, the handleSubmit event will be triggered when the control and v keys work together
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>
Sometimes we need to accurately match the key combination before triggering the corresponding event. In the following example, when And only when the control and v keys work together, the handleSubmit event will be triggered
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>
I believe that after reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Detailed explanation of JS Baidu search box effect function implementation case
JS CSS3 realizes mouse and picture interactive amplification Effect
The above is the detailed content of Vue+modifier trigger event. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
![Event ID 4660: Object deleted [Fix]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Event ID 4660: Object deleted [Fix]
Jul 03, 2023 am 08:13 AM
Some of our readers encountered event ID4660. They're often not sure what to do, so we explain it in this guide. Event ID 4660 is usually logged when an object is deleted, so we will also explore some practical ways to fix it on your computer. What is event ID4660? Event ID 4660 is related to objects in Active Directory and will be triggered by any of the following factors: Object Deletion – A security event with Event ID 4660 is logged whenever an object is deleted from Active Directory. Manual changes – Event ID 4660 may be generated when a user or administrator manually changes the permissions of an object. This can happen when changing permission settings, modifying access levels, or adding or removing people or groups
Get upcoming calendar events on your iPhone lock screen
Dec 01, 2023 pm 02:21 PM
On iPhones running iOS 16 or later, you can display upcoming calendar events directly on the lock screen. Read on to find out how it's done. Thanks to watch face complications, many Apple Watch users are used to being able to glance at their wrist to see the next upcoming calendar event. With the advent of iOS16 and lock screen widgets, you can view the same calendar event information directly on your iPhone without even unlocking the device. The Calendar Lock Screen widget comes in two flavors, allowing you to track the time of the next upcoming event, or use a larger widget that displays event names and their times. To start adding widgets, unlock your iPhone using Face ID or Touch ID, press and hold
In JavaScript, what is the purpose of the 'oninput' event?
Aug 26, 2023 pm 03:17 PM
When a value is added to the input box, the oninput event occurs. You can try running the following code to understand how to implement oninput events in JavaScript - Example<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text"
How to implement calendar functions and event reminders in PHP projects?
Nov 02, 2023 pm 12:48 PM
How to implement calendar functions and event reminders in PHP projects? Calendar functionality and event reminders are one of the common requirements when developing web applications. Whether it is personal schedule management, team collaboration, or online event scheduling, the calendar function can provide convenient time management and transaction arrangement. Implementing calendar functions and event reminders in PHP projects can be completed through the following steps. Database design First, you need to design a database table to store information about calendar events. A simple design could contain the following fields: id: unique to the event
How to implement change event binding of select elements in jQuery
Feb 23, 2024 pm 01:12 PM
jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:
What are the commonly used events in jquery
Jan 03, 2023 pm 06:13 PM
Commonly used events in jquery are: 1. Window events; 2. Mouse events, which are events generated when the user moves or clicks the mouse on the document, including mouse clicks, move-in events, move-out events, etc.; 3. Keyboard events, Events are generated every time the user presses or releases a key on the keyboard, including key press events, key release events, etc.; 4. Form events, such as the focus() event will be triggered when an element gains focus, and the focus() event will be triggered when it loses focus. The blur() event is triggered, and the submit() event is triggered when the form is submitted.
Detailed explanation of input box binding events in Vue documents
Jun 21, 2023 am 08:12 AM
Vue.js is a lightweight JavaScript framework that is easy to use, efficient and flexible. It is one of the most popular front-end frameworks currently. In Vue.js, input box binding events are a very common requirement. This article will introduce the input box binding events in the Vue document in detail. 1. Basic concepts In Vue.js, the input box binding event refers to binding the value of the input box to the data object of the Vue instance, thereby achieving two-way binding of input and response. In Vue.j
How to build event-based applications using PHP
May 04, 2024 pm 02:24 PM
Methods for building event-based applications in PHP include using the EventSourceAPI to create an event source and using the EventSource object to listen for events on the client side. Send events using Server Sent Events (SSE) and listen for events on the client side using an XMLHttpRequest object. A practical example is to use EventSource to update inventory counts in real time in an e-commerce website. This is achieved on the server side by randomly changing the inventory and sending updates, and the client listens for inventory updates through EventSource and displays them in real time.
