vue实时监控输入框输入字符的长度

灰太狼 2023-01-15 12:23 256阅读 0赞

## vue实时监控输入框输入字符的长度 ##

先看下效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70]  
这个真的简单不能再简单了，不过还是得记录一下，以免后续忘得一干二净  
上代码吧!

<van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
          <van-row type="flex" justify="center">
            <van-col span="22">
              <div class="popup">
                <van-row type="flex" justify="space-between">
                  <van-col span="10">
                    <div class="title">
                      <p>
                        昵称
                      </p>
                    </div>
                  </van-col>
                  <van-col span="10">
                    <div class="content">
                      <van-button class="submit">保存</van-button>
                      
                    </div>
                  </van-col>
                </van-row>
                <div class="popup-input">
                  <van-row type="flex" justify="space-between">
                    <van-col span="20">
                      <div class="title">
                        <input type="text" v-model="value" maxlength="12" ref="inputValue" placeholder="" />
                      </div>
                    </van-col>
                    <van-col span="4">
                      <div class="cont-length">
                        <p>{ { inputLength}}/12</p>
                        
                      </div>
                    </van-col>
                  </van-row>
                </div>
              </div>
            </van-col>
          </van-row>
        </van-popup>

配合popup使用做的一个弹窗

js方法:

// inputLength: 0 默认长度
    watch: { 
          value: { 
            handler: function() { 
              var _this = this;
              _this.inputLength = _this.$refs.inputValue.value.length;
            },
            deep: true
          }
        }

样式看自己情况写吧，我这就不上代码了

完！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70]: /images/20221022/65b3fb201ec3428690370dd8ea695bf2.png