vue中键盘事件的关键字是 v-on:keydown,格式为 v-on:keydown=“fun($event)”
($event是vue中的事件对象,和我们传统js中的event对象是一样的)
接下来就用一个案例来演示一遍吧。给input输入框添加键盘事件,限定只可以输入数字:
在body中给input添加v-on事件:
<body><div id="jieke"><input type="text" v-on:keydown="fun($event)" /></div></body>
在js中添加函数:
<script type="text/jscript">new Vue({el: "#jieke",methods: {fun:function(event){var code = event.keyCode;if(code<48 || code>57){event.preventDefault();alert("只支持输入数字!");}}}});</script>
对代码的解释:
运行结果:
(当输入数字的时候可以正常输入,当点击键盘上其他按键的话则会阻止并弹出对话框提示)