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的区别

    本文主要介绍了浅谈vue3中ref、toRef、toRefs 和 reactive的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    这篇文章主要介绍了用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,代码简单易懂,非常不错,具有一定的参考借鉴价值需要的朋友可以参考下
    2019-08-08
  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。下面这篇文章主要给大家介绍了关于vue中各组件之间传递数据的方法示例,需要的朋友可以参考学习。
    2017-07-07
  • vue项目结构目录超详细介绍

    vue项目结构目录超详细介绍

    这篇文章主要给大家介绍了关于vue项目结构目录超详细介绍的相关资料,Vue项目目录结构是指在开发Vue项目时,为了更好地组织和管理代码,将不同的文件按照一定的规则和层次结构进行分类和存放的方式,需要的朋友可以参考下
    2023-12-12
  • html-webpack-plugin修改页面的title的方法

    html-webpack-plugin修改页面的title的方法

    这篇文章主要介绍了html-webpack-plugin修改页面的title的方法 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue中watch的实际开发学习笔记

    vue中watch的实际开发学习笔记

    watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下
    2022-11-11
  • vue项目中使用lib-flexible解决移动端适配的问题解决

    vue项目中使用lib-flexible解决移动端适配的问题解决

    这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue使用js-file-download插件下载文件乱码的解决

    vue使用js-file-download插件下载文件乱码的解决

    这篇文章主要介绍了vue使用js-file-download插件下载文件乱码的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue精美简洁登录页完整代码实例

    Vue精美简洁登录页完整代码实例

    这篇文章主要给大家介绍了关于Vue精美简洁登录页完整代码的相关资料,通过文中的方法大家可以使用实现简单的用户登录界面,下面通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 详解mpvue开发微信小程序基础知识

    详解mpvue开发微信小程序基础知识

    这篇文章主要介绍了详解mpvue开发微信小程序基础知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论