1、我們工作中經常會有類似於這樣的需求：按下Enter鍵觸發某個事件、或者按下ESC退出頁面等各種各樣的場景。在Vue中，可以通過鍵盤修飾符來實現這樣的場景。 2、事例代碼： 這裡在車名的input框里添加keyup事件，即鍵盤按下抬起時觸發；後面的“enter”即為按鍵修飾符，定義哪個按鍵會觸發該 ...
1、我們工作中經常會有類似於這樣的需求：按下Enter鍵觸發某個事件、或者按下ESC退出頁面等各種各樣的場景。在Vue中，可以通過鍵盤修飾符來實現這樣的場景。
2、事例代碼：
<body>
<divi id="app">
序號：<input type="text" v-model="idValue"/>
車名：<input type="text" v-model="nameValue" @keyup.enter="add()"/>
<p v-for="item in list">
序號：{{item.id }} , 車名：{{ item.name }}<br/>
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
idValue:'',
nameValue:'',
list:[
{id:1,name:'奧迪'},
{id:2,name:'寶馬'}
]
},
methods:{
add(){
this.list.unshift({
id : this.idValue,
name : this.nameValue
});
}
}
})
</script>
</body>
這裡在車名的input框里添加keyup事件，即鍵盤按下抬起時觸發；後面的“enter”即為按鍵修飾符，定義哪個按鍵會觸發該事件。所以當游標位於該input框時，按下Enter鍵抬起就會觸發事件執行add方法，並添加新數據展示在頁面上。
3、除了enter鍵以外，vue還定義了以下按鍵修飾符：tab、delete (捕獲“刪除”和“退格”鍵)、esc、space、up、down、left、right；這些是官網提供的修飾符，但是實際進行操作的時候發現，幾乎所有的鍵盤按鍵都可以用來作為修飾符，大家有空可以自己嘗試一下，畢竟vue更新速度還是比較快的，真理還是要來自於實踐。
4、除了使用以上方法，我們還可以使用keycode（鍵盤碼）來作為修飾符使用。如：f2的鍵盤碼為113，我們可以修改代碼為：
車名：<input type="text" v-model="nameValue" @keyup.113="add()"/>
這時游標在input框時，我們按下再鬆開f2時也可以觸發事件。
註：不管是使用鍵盤名稱還是使用鍵盤碼都要防止快捷鍵的衝突，快捷鍵衝突的時候會不起作用。
5、當然按鍵事件除了keup還有kedown等其他按鍵事件，大家有空的話可以嘗試使用其他按鍵事件。
每天進步一點點！
