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

最新推荐文章于 2024-04-09 09:27:04 发布

小妤妤

最新推荐文章于 2024-04-09 09:27:04 发布

阅读量1.9k

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_43195831/article/details/116019320

版权

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

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

<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>
                  <!-- <van-button class="submited">保存</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>
                    <!-- <van-button class="submited">保存</van-button> -->
                  </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
      }
    }