如何使用 VueJS 防止数字输入

我需要创建一个验证来防止用户在文本框中输入数字。我找到了一些使用本机 JavaScript 的解决方案，但它在我这边不起作用。

在我的文本框中我有这个触发器

v-on:keyup="preventNumericInput($event)"> 

在我的 Vue 上，我在我的类上创建了一个函数

preventNumericInput($event) {
    console.log($event.keyCode); //will display the keyCode value
    console.log($event.key); //will show the key value

    var keyCode = ($event.keyCode ? $event.keyCode : $event.which);
    if (keyCode > 47 && keyCode < 58) {
        $event.preventDefault();
    }
}

你能帮我解决这个问题吗？

正如我的评论中提到的，keyup将触发得太晚，无法阻止将值输入到输入字段中。例如，考虑按住某个键来重复输入相同的值；没有钥匙up.

相反，使用keydown or keypress

<input @keypress="preventNumericInput">

Demo ~ http://jsfiddle.net/wadt08jm/1/ http://jsfiddle.net/wadt08jm/1/