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-cli脚手架引入图片的几种方法总结

    vue-cli脚手架引入图片的几种方法总结

    下面小编就为大家分享一篇vue-cli脚手架引入图片的几种方法总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 基于vue中对鼠标划过事件的处理方式详解

    基于vue中对鼠标划过事件的处理方式详解

    今天小编就为大家分享一篇基于vue中对鼠标划过事件的处理方式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue单文件组件无法获取$refs的问题

    vue单文件组件无法获取$refs的问题

    这篇文章主要介绍了vue单文件组件无法获取$refs的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 前端利用vue实现导入和导出功能详细代码

    前端利用vue实现导入和导出功能详细代码

    最近项目中让实现一个导入导出Excel的功能,下面这篇文章主要给大家介绍了关于前端利用vue实现导入和导出功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue 注册组件的使用详解

    vue 注册组件的使用详解

    Vue.js的组件的使用有3个步骤:创建组件构造器、注册组件和使用组件。这篇文章主要介绍了vue 注册组件的使用,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 简单实现vue验证码60秒倒计时功能

    简单实现vue验证码60秒倒计时功能

    这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 关于vue3默认把所有onSomething当作v-on事件绑定的思考

    关于vue3默认把所有onSomething当作v-on事件绑定的思考

    这篇文章主要介绍了关于vue3默认把所有`onSomething`当作`v-on`事件绑定的思考,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • VUE项目中调用高德地图的全流程讲解

    VUE项目中调用高德地图的全流程讲解

    这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue集成和使用SQLite的完整指南

    Vue集成和使用SQLite的完整指南

    SQLite 是一种轻量级的关系型数据库管理系统,以其简单易用、无需服务器等特点广泛应用于嵌入式系统、移动应用和小型应用程序中,在 Vue.js 项目中使用 SQLite,可以将应用的数据存储在客户端,本文将介绍如何在 Vue 项目中集成 SQLite,需要的朋友可以参考下
    2024-11-11
  • 详解Vue组件插槽的使用以及调用组件内的方法

    详解Vue组件插槽的使用以及调用组件内的方法

    在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点,有需要的朋友们参考下。
    2018-11-11

最新评论