input maxlength 方法重写 vue

在 Vue 中，可以使用 `v-model` 指令绑定输入框的值，并可以通过计算属性或监听器来实现 `maxlength` 的限制。以下是一个示例：

<template>
  <div>
    <input v-model="inputValue" />
    <p>已输入 {{ inputLength }} / {{ maxLength }} 个字符</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      maxLength: 10
    };
  },
  computed: {
    inputLength() {
      return this.inputValue.length;
    }
  },
  watch: {
    inputValue(newVal) {
      if (newVal.length > this.maxLength) {
        this.inputValue = newVal.substring(0, this.maxLength);
      }
    }
  }
};
</script>

在这个示例中，使用 `v-model` 指令绑定了 `inputValue` 属性，计算属性 `inputLength` 返回当前输入框中的字符长度，而 `watch` 监听器则在输入框内容发生变化时判断字符长度是否超过了最大长度，如果超过了则截取前 `maxLength` 个字符。最后，页面上还显示了当前已输入的字符数和最大字符数。通过这种方法，在 Vue 中也可以实现 `maxlength` 的限制。