vue如何动态的限制输入位数？

最新推荐文章于 2024-07-05 11:07:48 发布

736我最帅

最新推荐文章于 2024-07-05 11:07:48 发布

阅读量189

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bossmmm/article/details/140008769

版权

示例代码

          <input 
            type="number" 
            :placeholder="'请输入' + item.title"
            ref="focus"
            v-model="inputValue"
            @focus="onInputFocus"
          >

核心要点就是利用v-model双向绑定和wacth监听输入的元素变化，解决代码如下：

  watch:{
    inputValue(){
      var input = this.inputValue;  
      // 这里假设我们限制为this.item.maxlength位数字  
      if (input.length >this.item.maxlength) {  
          // 如果输入超过this.item.maxlength位，则截断到this.item.maxlength位  
          this.inputValue = input.slice(0, this.item.maxlength);  
      } 
    }

  },