Shulou(Shulou.com)06/02 Report--

This article mainly introduces what button modifiers are available in vue, which can be used for reference by interested friends. I hope you can learn a lot after reading this article. Let's take a look at it.

The key modifiers in vue are: 1, ".enter" to capture enter key; 2, ".tab" to capture tab key; 3, ".delete" to capture "delete" and "backspace" keys; 4, ".esc" to capture cancel keys; 5, ".space" to capture space bar; 6, ".up", etc.

The operating environment of this tutorial: windows10 system, vue2.9.6 version, DELL G3 computer.

When listening for keyboard events, we often need to find the code value corresponding to the common keys. Vue can add a button modifier to the v-on to listen for key events

All key modifier aliases are listed here:

.enter = > / / enter key. Tab = > / / tab key. Delete (capture "delete" and "backspace" keys) = > / / delete key. Esc = > / / cancel key. Space = > / / spacebar. Up = > / upper .down = > / / lower. Left = > / left. Right = > / / right

In the operation of our usual login function, enter the password and press enter to log in, so there is no need to click the login button in the operation of the mouse, so how is this function realized in vue?

Let's do a simple data addition function to demonstrate this case:

Table {width:760px; / * margin: 0 auto; * / border-collapse: collapse;} table td {border: 1px solid black; width: .4rem } id name id name {{item.id}} {{item.name}} let vm = new Vue ({el:'#app' Data: {list: [{id:1,name:' '}], id:'', name:''} Methods: {add () {/ / add a new object this.list.push ({id:this.id) to the last bit of the array Name:this.name}) / / clear the text box this.id=this.name= ""} after you finish adding)

At this time, you can add it by clicking the add button.

The keyup key lift event is provided in the native js, so you can bind the add method in the center of the method to the keyup lift event to see if the desired effect can be achieved, because we hit enter after typing name, so bind the keyup event to our name text box

As you can see, after entering name, it has been automatically added without hitting the enter key, so you need to use the key modifier.

When the input is complete, and the text box is still in focus, when you hit enter, the add function is executed:

In addition to enter, the Vue website also provides the following modifiers:

To support older browsers if necessary, Vue provides aliases for most commonly used keystrokes:

.enter

.tab

.delete (capture delete and backspace keys)

.esc

.space

.up

.down

.left

.right

So apart from the buttons provided by Vue, can other keys be used? let's take f4 as an example.

This is the automatic matching key modifier added by Vue in 2.5.0, but we usually only use function keys to act as key modifiers.

Try not to use the key you want to enter

Thank you for reading this article carefully. I hope the article "what button modifiers are there in vue" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.