vue基础——按键修饰符

    科技2022-07-11  83

    按键修饰符

    通过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>
    Processed: 0.042, SQL: 8