在vue中按鍵修飾符有哪些-前端問答-PHP中文網

在vue中按鍵修飾符有哪些

青灯夜游

發布： 2022-01-04 11:33:38

原創

4649 人瀏覽過

vue中的按鍵修飾符有：1、“.enter”，可捕獲enter鍵；2、“.tab”，可捕獲tab鍵；3、“.delete”，可捕獲“刪除”和“退格”按鍵；4、“.esc”，可捕獲取消鍵；5、“.space”，可捕獲空白鍵；6、“.up”等。

在vue中按鍵修飾符有哪些

本教學操作環境：windows10系統、vue2.9.6版，DELL G3電腦。

在監聽鍵盤事件時，我們常常需要找出常用按鍵對應的 code 值。 Vue 可以在v-on 上新增按鍵修飾符，用於監聽按鍵事件

這裡列出所有的按鍵修飾符別名：

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

登入後複製

在我們平常登入功能的操作中，輸入密碼後會按下回車進行登錄，這樣就不需要在操作滑鼠點擊登入按鈕了，那麼這項功能在vue中是怎麼實現的呢

我們做一個簡單的新增資料功能，來示範這個案例：

  <style>
        table{
            width:760px;
            /* margin: 0 auto; */
            border-collapse: collapse;
        }   
        table td{
            border: 1px solid black;
            width: .4rem;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <label for="">id</label>
        <input type="text" v-model="id">
        <label for="">name</label>
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add()">
 
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:&#39;#app&#39;,
            data:{
                list:[
                    {id:1,name:&#39;哈哈&#39;}
                ],
                id:&#39;&#39;,
                name:&#39;&#39;
            },
            methods: {
                add(){
                    // 向数组的最后一位添加新的对象
                    this.list.push({id:this.id,name:this.name})
                    // 完成添加后清空文本框
                    this.id=this.name=""
                }
            }
        })
    </script>
</body>

登入後複製

這個時候是這可以透過點擊新增按鈕去新增的

在vue中按鍵修飾符有哪些

在原生js中有提供了keyup 按鍵來抬起事件，那麼可以把方法中心的add 方法綁定到keyup 抬起事件中，看看能否達到想要的效果，因為我們是在輸入完name 之後去敲回車，所以把keyup 事件綁定到我們的name 文字方塊中

 <input type="text" v-model="name" @keyup="add()">

登入後複製

在vue中按鍵修飾符有哪些

可以看到，當輸入完name之後還沒敲擊回車鍵，就已經自動加入了，這時候就需要用到按鍵修飾符了

                                 <!-- enter:回车键 -->
<input type="text" v-model="name" @keyup.enter="add()">

登入後複製

當輸入完成後，且文字方塊還在獲得焦點的同時，在敲回車的時候，才會執行add函數：

在vue中按鍵修飾符有哪些

## 除了enter 之外，Vue官網還提供了以下修飾符：

為了在必要的情況下支援舊瀏覽器，Vue 提供了絕大多數常用的按鍵碼的別名：

.enter
.tab
#.delete (捕獲「刪除」和「退格」鍵)
.esc
.space

那麼除了Vue提供的這些按鍵之外，其他按鍵可不可以使用呢，我們拿f4 舉個例子

<input type="text" v-model="name" @keyup.f4="add()">

登入後複製

在vue中按鍵修飾符有哪些這是

Vue在2.5.0

新增的自動匹配按鍵修飾符，但是我們一般只使用功能鍵去充當按鍵修飾符，
#盡量不要使用要輸入的鍵

【相關推薦：《

vue.js教程

》】

以上是在vue中按鍵修飾符有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

在vue中按鍵修飾符有哪些