<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" onkeydown="chuantongjs()" placeholder="传统JS按键监控"/><br>
<input type="text" v-on:keydown="vuekeydown($event)" placeholder="Vue按键监控"/>
<!-- vue事件书写新样式-->
<input type="text" @keydown="vuekeydowns($event)" placeholder="Vue按键监控"/>
<!-- 确认键的事件监控
.enter ：确认键
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right -->
<input type="text" placeholder="enter" @keyup.enter="submit"/>
</div>
<br>
</body>
<script>
//传统JS
function chuantongjs() {
////event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
var keycode = event.keyCode;//数字来的
if (keycode == 13) {
alert("你按下的是回车键哦");
}
// &&
if (keycode <= 57 && keycode >= 48) {
//alert("让按键失效");
event.preventDefault();//让按键失效
} else if (keycode >= 96 && keycode <= 105) {
event.preventDefault();//让按键失效
} else {
alert(keycode);
}
}
//Vue方式
new Vue({
el: "#app",
data: {
message: "Hello Vue laowang",
number: 100
},
methods: {
vuekeydown: function (event) {
var keycodes = event.keyCode;
alert(keycodes);
},
vuekeydowns: function (event) {
var keycodes = event.keyCode;
alert("vuekeydowns");
},
submit: function () {
alert("enter");
}
}
});
new Vue({
el: "#keydown",
data: {},
methods: {}
})
</script>
</html>
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
常见资源合集和破解 fmvvvteih...