通过uniapp实现实时监控input框输入字数

运行效果：

由于源码比较长所以我写一个只争对这个功能的代码，就可以了。文章后面我会放源码的。

export default {
  data() {
    return {
      inputValue: '', 输入框的值
      isExceedLimit: false // 是否超过最大限制标志位
    };
  },
  computed: {
    showCharacterCount() {
      const count = this.inputValue.length;
      this.isExceedLimit = count > 3; // 如果字符数超过4，设置标志位为 true
      return `${count}/4`; // 展示输入到第几个字符
    }
  }
};

原理：通过v-model双向绑定inputvalue记录输入的值，在使用一个变量 isExceedLimit来判断是否超过了最大的限制标志位，通过computed监听inputvalue的变化。将inputValue.length的长度赋值给count，通过isExceedLimit = count，如果超过3，由于isExceedLimit时布尔类型，相等即为真为true，，可能大家有疑问为什么是大于3而不是4呢，因为记录inputvalue的值是从0开始的，0-3一共有4位所以实际就是判断4位字符了。步骤如下：

• 使用 v-model 指令，将输入框的值绑定到 inputValue 属性上；

• 使用计算属性 showCharacterCount 来计算输入的字符数，并展示在盒子中；

• 根据 isExceedLimit 的值来控制数字盒子的文字颜色，如果超过最大限制（4个字符），则设置为红色。

后面是源码：

这是一个自定义组件：

这是他的父页面：

里面的图片地址和不想关的自定义组件，图片可以使用自己写的地址，无关自定义组件删除即可。