通过v-on的方式绑定键盘事件,键盘事件类型:
keydown 键盘按下(如果按住不放,不停的重复触发) keyup 键盘抬起 keypress 键盘按下(只支持字符键)实现输入密码后,enter提交,在控制台输出:
<input type="text" v-model="passwordName" v-on:keyup.enter="handle"/>案例分享:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <div> 用户名:<input type="text" v-model="uname"/> </div> <div> 密 码:<input type="text" v-model="passwordName" v-on:keyup.enter="handle"/> </div> <div> <input type="button" value="提交" v-on:click="handle"/> <input type="button" value="清空" v-on:click="handle1"/> </div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ uname:"", passwordName:"" }, methods:{ handle:function(){ console.log(this.uname+" "+this.passwordName) }, handle1:function(){ this.uname = ''; this.passwordName = ''; } } }) </script> </body> </html>