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

Question

我的目标是限制用户可以在输入字段中输入的位数。所以一个用户只能输入 10 位数字。我尝试了 min 和 max 仍然不起作用

这是代码

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

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

              }

        </script>

现在我可以添加超过 10 位数字

原文由 sinusGob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我们可以手动控制 <input> 的值：

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

并检查 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()
    }
  }

请注意， this.$forceUpdate() 用于在用户输入超过 10 个字符时使组件重新渲染。

Codepen 上的演示

原文由 ittus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

替换这个：

 <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"
/>

原文由 Amarat 发布，翻译遵循 CC BY-SA 4.0 许可协议