如何设置Vue组件，使其输入框只能输入数字或保留两位小数？

本文共计501个文字，预计阅读时间需要3分钟。

目录安装 Vant- 两种方法 - 原生方法 - Vant 使用方法- 项目中使用 Vant 框架- 安装 Vant- 在项目中使用 Vant - 通过 npm 或 yarn 安装- Vue2 和 Vue3 安装方法基本相同 - npm 或 yarn 安装 Vant

目录

• 正文
• vant 的安装
• 两种方法
• 原生方法使用
• vant使用方法

正文

项目使用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="cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" rel="external nofollow" /> <script src="cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

或者

<script src="staticweb.keepcdn.com/fecommon/package/vant@2.8.7/vant/vant.min.js"></script> <link rel="stylesheet" href="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限制输入的资料请关注自由互联其它相关文章！