004_Vue按键修饰符
生活随笔
收集整理的這篇文章主要介紹了
004_Vue按键修饰符
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 按鍵修飾符keyup
1.1. .enter回車鍵
<input v-on:keyup.enter="handleSubmit" />1.2. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>enter鍵的keyup事件</title></head><body><div id="app"><form action=""><div>用戶名: <input type="text" v-model="userName" /></div><div>密碼: <input type="password" v-model="password" v-on:keyup.enter="handleSubmit" /></div><div><input type="button" @click="handleSubmit" value="登錄" /></div></form></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {userName: "",password: ""},methods: {handleSubmit: function(event){console.log("userName = " + this.userName + ", password = " + this.password);}}});</script></body> </html>1.3. 效果圖
2. 自定義按鍵修飾符
2.1. 你還可以通過全局config.keyCodes對象自定義按鍵修飾符別名。名字可以自定義, 但是對應的值必須是按鍵對應event.keyCode值。
2.2. 代碼
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>自定義按鍵修飾符</title></head><body><div id="app">left: <input type="text" v-on:keyup.a='handleLeft' /> <br />right: <input type="text" v-on:keyup.d='handleRight' /> <br />up: <input type="text" v-on:keyup.w='handleUp' /> <br />down: <input type="text" v-on:keyup.s='handleDown' /></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.config.keyCodes.a = 65;Vue.config.keyCodes.d = 68;Vue.config.keyCodes.w = 87;Vue.config.keyCodes.s = 83;var vm = new Vue({el: "#app",data: {},methods: {handleLeft: function(event){console.log("left: " + event.keyCode);},handleRight: function(event){console.log("right: " + event.keyCode);},handleUp: function(event){console.log("up: " + event.keyCode);},handleDown: function(event){console.log("down: " + event.keyCode);}}});</script></body> </html>2.3. 效果圖
總結
以上是生活随笔為你收集整理的004_Vue按键修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 003_Vue事件
- 下一篇： 033_webpack打包ES6模块化工