vue中的按鍵修飾符有:1、“.enter”,可捕獲enter鍵;2、“.tab”,可捕獲tab鍵;3、“.delete”,可捕獲“刪除”和“退格”按鍵;4、“.esc”,可捕獲取消鍵;5、“.space”,可捕獲空白鍵;6、“.up”等。
本教學操作環境: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:'#app', data:{ list:[ {id:1,name:'哈哈'} ], id:'', name:'' }, methods: { add(){ // 向数组的最后一位添加新的对象 this.list.push({id:this.id,name:this.name}) // 完成添加后清空文本框 this.id=this.name="" } } }) </script> </body>
這個時候是這可以透過點擊新增按鈕去新增的
在原生js中有提供了keyup 按鍵來抬起事件,那麼可以把方法中心的add 方法綁定到keyup 抬起事件中,看看能否達到想要的效果,因為我們是在輸入完name 之後去敲回車,所以把keyup 事件綁定到我們的name 文字方塊中
<input type="text" v-model="name" @keyup="add()">
可以看到,當輸入完name之後還沒敲擊回車鍵,就已經自動加入了,這時候就需要用到按鍵修飾符了
<!-- enter:回车键 --> <input type="text" v-model="name" @keyup.enter="add()">
當輸入完成後,且文字方塊還在獲得焦點的同時,在敲回車的時候,才會執行add函數:
## 除了enter 之外,Vue官網還提供了以下修飾符:為了在必要的情況下支援舊瀏覽器,Vue 提供了絕大多數常用的按鍵碼的別名:
(捕獲「刪除」和「退格」鍵)
<input type="text" v-model="name" @keyup.f4="add()">
這是
Vue在2.5.0新增的自動匹配按鍵修飾符,但是我們一般只使用功能鍵去充當按鍵修飾符,
#盡量不要使用要輸入的鍵
【相關推薦: 《
vue.js教程以上是在vue中按鍵修飾符有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!