Question

我的目标是限制用户可以在输入字段中输入的位数。因此，用户只能输入10位数字。我尝试了最小和最大仍然无法正常工作

这是代码

        <input
          v-model="amount"
          type="number"
        >


        <script>
             export default {
                  data() {
                      return { 
                          amount: 7800
                      }
                   }

              }

        </script>

现在我可以添加10位以上的数字

Answer 1

我们可以手动控制c1的值：

<input>

并签入updateValue方法：

 <input
  type="number"
  :value="amount"
  @input="updateValue"
/>

请注意，data() { return { amount: 7800 } }, methods: { updateValue(event) { const value = event.target.value console.log(value, this.amount) if (String(value).length <= 10) { this.amount = value } this.$forceUpdate() } }用于在用户输入10个以上字符时重新渲染组件。

在Codepen上的演示

Answer 2

在“已更新”上放置一个条件，检查数字，如果超出，则将其剪切。我做了类似的事情，但是为了获得最大值，而不是数字，但是我认为它的逻辑相同：

updated() {
    if (this.album.max_colorized > this.maxPictures) {
        this.album.max_colorized = this.maxPictures;
    }
}

如果超过最大值，请更改为最大值。

Answer 3

替换此：

<input v-model="amount" type="number">

到

<input v-model="amount"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "10"
/>

Answer 4

使用 maxlength 属性

<input
 v-model="amount"
 type="number"
 maxlength="10"
>

如何限制Vue输入中的位数？

4 个答案: