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

Question

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

这是代码

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


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

              }

        </script>

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

Answer 1

替换这个：

<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 2

我们可以<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 上的演示