2020-10-13

最新推荐文章于 2021-03-14 13:09:23 发布

caikys

最新推荐文章于 2021-03-14 13:09:23 发布

阅读量83

点赞数

分类专栏： vue结合elementUI前端框架文章标签： vue elementUI

本文链接：https://blog.csdn.net/caikys/article/details/109050990

版权

vue结合elementUI前端框架专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中遇到input类型为number时，maxlength属性失效的问题，提供了两种解决方案。方法一是利用oninput事件，限制输入长度；方法二是通过监听input事件并截取值。这两种方法在处理循环数据时同样适用。

摘要由CSDN通过智能技术生成

input的type为number时，maxlength失效的解决办法（循环数据也可用）：

方法1：

<div v-for="(item,index) in data" :key="index">
    <el-input placeholder="最低分" oninput="if(value.length>4)value=value.slice(0,4)"         type="number" v-model="item.minScore" class="input-half"></el-input>
</div>

方法2：

<el-input type="number" @input.native="valueInput($event,3)" placeholder="请输入金额" v-model="item.cost" ></el-input>


valueInput(e,len) {
    e.target.value = e.target.value.slice(0,len);
}