首頁  >  文章  >  web前端  >  在vue中按鍵修飾符有哪些

在vue中按鍵修飾符有哪些

青灯夜游
青灯夜游原創
2022-01-04 11:33:384677瀏覽

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
  • ##.up
  • #.down
  • .left
  • #.right
那麼除了Vue提供的這些按鍵之外,其他按鍵可不可以使用呢,我們拿f4 舉個例子
<input type="text" v-model="name" @keyup.f4="add()">

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

Vue在2.5.0

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

【相關推薦: 《

vue.js教程

》】

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn