1.在做項目中有時會用到鍵盤事件,那么vue也提供了監聽鍵盤事件。我們可以通過v-on添加按鍵修飾符,完成相應的功能。
2.代碼實現:
<div id="app">
<input type="text" id="username" v-on:keyup.enter="submit()">
<button v-on:click="submit()" id="btn">你點我試試</button>
</div>
<script type="text/javascript" src="js/vue.js">
</script>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
submit() {
alert("試試就試試");
}
}
})
</script>
3.代碼解釋
v-on:keyup.enter="submit()"
v-on指令綁定enter鍵事件,點擊執行submit()函數事件,
同樣也可以簡寫為@keyup.enter="submit()"
下面的button按鈕也綁定了點擊事件,執行函數submit();
4.同樣vue監聽按鍵事件也可以添加其他的按鍵:只要加上相應的按鍵的名稱就行了
例如:@keyup.tab="";@keyup.delet = "";
里面寫按鍵觸發執行的事件就可以了。
