在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符。
全部的按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
實(shí)例：
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
在日常的頁(yè)面交互中，我們經(jīng)常會(huì)遇到這種需求：用戶輸入賬號(hào)密碼后點(diǎn)擊 Enter 鍵、一個(gè)多選篩選條件通過點(diǎn)擊多選框后自動(dòng)加載符合選中條件的數(shù)據(jù)等等。在傳統(tǒng)的前端開發(fā)中，當(dāng)我們碰到這種類似的需求時(shí)，我們往往需要知道 js 中需要監(jiān)聽的按鍵所對(duì)應(yīng)的 keyCode，然后通過判斷 keyCode 得知用戶是按下了那個(gè)按鍵，繼而執(zhí)行后續(xù)的操作。
先以.enter為例簡(jiǎn)單測(cè)試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:按鍵修飾符</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
Vue：<input type="text" v-on:keydown.enter="fun1">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("按下的是回車");
}
}
});
</script>
</html>
image.png
也可以寫為，效果一樣
Vue：<input type="text" @keydown.enter="fun1">
image.png
