在vuejs中将输入限制为单个数字

Question

我在VueJS中有一个输入，它使用v-model绑定，例如

<input type="number" v-model.number="testinput">

我想对此输入设置限制，以便它只能是1到6之间的单个数字。只要一个数字在框中，其他按键应该没有效果。输入无效数字（例如9）也应无效。

我不确定最佳方法是什么，我需要指令，过滤器，事件处理程序，还是制作新的自定义输入组件？

Answer 1

1. 在输入字段中将maxlength属性设置为1（这将限制为单个字符）。

2. 使用pattern属性将正确的正则表达式添加到输入字段。 （这将检查输入只有1个字符，并使用数字1-5。

    <input type="number" maxlength="1" pattern="([12345])\w{0}" v-model.number="testinput">