目录
- 正文
- 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=\”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项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)
- vue3 Table分页保留选中状态代码示例
- vue之保留小数点两位小数使用filters(过滤器)
