按键修饰符
-
.enter 回车键
-<input v-on:keyup.enter = "submit">
-
delete删除键
-<input v-on:keyup.delete = "handle">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<form action="">
<div>
用户名:
<input type="text" v-on:keyup.delete = 'clearContent' v-model = "uname">
</div>
<div>
密码:
<!-- keyup绑定键盘事件注意要加上.enter按键修饰符
若不加按键修饰符 按任何按键都会触发 -->
<input type = "text" v-on:keyup.enter = "handleSubmit" v-model = "pwd">
</div>
<div>
<input type = "button" v-on:click = "handleSubmit" value = "提交">
</div>
</form>
</div>
<script type = "text/javascript" src = "vue.js"></script>
<script>
/*
事件绑定-按键修饰符
*/
var vm = new Vue({
el:'#app',
data:{
uname:'',
pwd:''
},
methods: {
clearContent:function(){
// 按delete键清空用户名
this.uname = '';
},
handleSubmit: function(){
console.log(this.uname,this.pwd)
}
}
});
</script>
</body>
</html>