vue 输入框限制3位小数_Vue中实现输入框Input输入限制

本文介绍了在Vue中限制输入框只能输入最多3位小数的方法,包括使用修饰符、监听输入框变化以及封装全局指令。在封装全局指令时,还解决了因直接修改输入框值不触发input事件导致的问题,通过添加防抖函数避免内存溢出。
摘要由CSDN通过智能技术生成

在开发过程中,基本都遇到过需要限制输入的情况,比如金额、仅字母数字、可输入小数位等,网上搜了很多方法也遇到一些坑,所以分享出来。震惊:阿里腾讯一线大厂前端面试学习经验,最完整面试真题分享!_前端交流群:954854084-CSDN博客​blog.csdn.net

1.使用修饰符实现数字输入

在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如:

.number可以实现限制数字输入,但是会有以下问题:会出现type="number"自带样式,当然可以通过添加以下css清除

/* 普通IE浏览器 样式清除 */

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

-webkit-appearance: none !important;

}

/* 火狐浏览器样式清除 */

input[type="number"]{

-moz-appearance:textfield;

}可以无限输入特殊符号+-.,会导致清空data中的值testValue 这里的修饰符也无法实现定制限制输入,不能满足要求

2.监听输入框变化

通过@input监听更新数据,实现只能输入数字,而且可以自行定制限制输入内容

此方法可以满足需求,但是无法封装进行批量使用

3.封装全局指令

封装input限制输入指令

//input.js

<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值