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限制输入的资料请关注脚本之家其它相关文章!

相关文章

  • vue实现文件上传读取及下载功能

    vue实现文件上传读取及下载功能

    这篇文章主要为大家详细介绍了vue实现文件上传读取及下载功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue项目使用可选链操作符编译报错问题及解决

    vue项目使用可选链操作符编译报错问题及解决

    这篇文章主要介绍了vue项目使用可选链操作符编译报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • el-form-renderer使用教程

    el-form-renderer使用教程

    本文主要介绍了el-form-renderer使用教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 浅析vue如何实现手机横屏功能

    浅析vue如何实现手机横屏功能

    在项目开发中有时候需求需要手动实现横屏功能,所以这篇文章主要为大家详细介绍了如何使用Vue实现手机横屏功能,需要的小伙伴可以参考一下
    2024-03-03
  • 使用vue-cli导入Element UI组件的方法

    使用vue-cli导入Element UI组件的方法

    这篇文章给大家介绍了使用vue-cli导入Element UI组件的方法,非常不错,具有一定的参考借鉴价值,需要的朋友一起看看吧
    2018-05-05
  • 在Vue中是如何封装axios

    在Vue中是如何封装axios

    这篇文章主要介绍在Vue中是如何封装axios的相关资料,axios的封装主要是帮助我们简化代码和利于后期的更新维护,感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容
    2021-10-10
  • Vue中img的src属性绑定与static文件夹实例

    Vue中img的src属性绑定与static文件夹实例

    本篇文章中主要介绍了Vue中img的src属性绑定与static文件夹实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-05-05
  • VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    这篇文章主要介绍了VUE+Canvas 实现桌面弹球消砖块小游戏,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • vue基础之data存储数据及v-for循环用法示例

    vue基础之data存储数据及v-for循环用法示例

    这篇文章主要介绍了vue基础之data存储数据及v-for循环用法,结合实例形式分析了vue.js使用data存储数据、读取数据及v-for遍历数据相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)

    一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)

    冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下
    2023-12-12

最新评论