vue限制输入数字或者保留两位小数实现
更新时间:2023年07月10日 10:31:15 作者:泪滴在琴上
这篇文章主要为大家介绍了vue限制输入数字或者保留两位小数实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
项目使用vant框架
vant 的安装
项目中使用vant时,可以通过npm或yarn进行安装。vue2和vue3安装方法基本相同
npm i vant -S # 安装最新版 npm i vant@latest-v2 -S # vue2项目,安装vant2
通过CDN安装 样式文件、js文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" rel="external nofollow" /> <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
或者
<script src="https://staticweb.keepcdn.com/fecommon/package/vant@2.8.7/vant/vant.min.js"></script> <link rel="stylesheet" href="https://staticweb.keepcdn.com/fecommon/package/vant@2.8.7/vant/index.css" rel="external nofollow" >
两种方法
原生方法使用
加上inputmode属性解决ios端调起带小数点的数字键盘问题
<label>价格:</label> <input type="text" v-model.trim="price" inputmode="decimal" placeholder="请输入价格" @keyup="handlePrice(price)"/>
vant使用方法
允许输入数字,调起带符号的纯数字键盘
<van-field type="number" v-model.number="price" label="价格" placeholder="请输入价格" @keyup="handlePrice(price)"/>
限制保留两位小数方法
handlePrice(val){ if (val !== '' && val.substr(0, 1) === '.') { val = ""; } val = val.replace(/^0*(0\.|[1-9])/, '$1');//解决 粘贴不生效 val = val.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的 val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数 if (val.indexOf(".") < 0 && val !== "") { if (val.substr(0, 1) === '0' && val.length === 2) { val = val.substr(1, val.length); } } this.priceAll = this.priceOne = val; },
以上就是vue限制输入数字或者保留两位小数实现的详细内容,更多关于vue限制输入的资料请关注脚本之家其它相关文章!
相关文章
浅谈vue3中ref、toRef、toRefs 和 reactive的区别
本文主要介绍了浅谈vue3中ref、toRef、toRefs 和 reactive的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-07-07使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
这篇文章主要介绍了用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,代码简单易懂,非常不错,具有一定的参考借鉴价值需要的朋友可以参考下2019-08-08html-webpack-plugin修改页面的title的方法
这篇文章主要介绍了html-webpack-plugin修改页面的title的方法 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-06vue项目中使用lib-flexible解决移动端适配的问题解决
这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08vue使用js-file-download插件下载文件乱码的解决
这篇文章主要介绍了vue使用js-file-download插件下载文件乱码的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论