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函數：
(捕獲「刪除」和「退格」鍵)<input type="text" v-model="name" @keyup.f4="add()">
這是
新增的自動匹配按鍵修飾符，但是我們一般只使用功能鍵去充當按鍵修飾符，
#盡量不要使用要輸入的鍵
【相關推薦： 《
vue.js教程以上是在vue中按鍵修飾符有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
