溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了在vue中有什么按鍵修飾符，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
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 提供了絕大多數常用的按鍵碼的別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
那么除了Vue提供的這些按鍵之外，其他按鍵可不可以使用呢，我們拿 f4 舉個例子
<input type="text" v-model="name" @keyup.f4="add()">
這是Vue在2.5.0新增的自動匹配按鍵修飾符，但是我們一般只使用功能鍵去充當按鍵修飾符，
盡量不要使用要輸入的鍵
感謝你能夠認真閱讀完這篇文章，希望小編分享的“在vue中有什么按鍵修飾符”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
