在做移动端调起数字键盘的时候，碰到了不少的问题，在网上找到了方案，但是却不符合我的要求的，现在总结下:

1.使用input type为number的类型，这种确实可以调起数字键盘，但是存在以下问题，会忽略掉点(.)，这样会导致正则无法匹配的问题，另外我在v-model中绑定的值被清空了，但是无法修改视图，修改type为text类型就可以

2.使用input type为text的类型，这种使用正则可以允许只填写价格的正则表达式，但是无法调起数字键盘

3.使用input type为tel的类型，这种可以调起数字键盘，在结合上面的正则表达式，可以做到满足我的需求验证价格

//需要验证的表单
<input class="setup-list-right setup-list-color" type="tel" v-model="accountsArg.amount_total" @input="isNumber('amount_total')" :placeholder="$t('message.Cash.qsrskje')">
//可以使用@input="isNumber('amount_total')" 或 @input="changeInput('amount_total')" 
//验证表单的方法
isNumber (name) {//判断要验证的值是否是小于0和是否是数字，不是数字清空if(this.accountsArg[name] < 0 || isNaN(this.accountsArg[name])){this.accountsArg[name] = '';}//保留小数点后两位var arg = this.accountsArg[name].split('.');if(arg[1] && arg[1].length >= 3){this.accountsArg[name] = arg[0] + '.' + arg[1].substr(0,2);}}//正则验证的方法changeInput (name) {let regPrice = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,regPriceFloat = /^((\d{1,10})|0)(\.)$/;//regPriceFloat是为了验证以.结尾的时候进行匹配，因为regPrice在@input事件中以.结尾时无法匹配if (!regPrice.test(this.accountsArg[name]) && !regPriceFloat.test(this.accountsArg[name])) {this.accountsArg[name] = '';}}

以上代码只是符合个人需求

参考文档:

https://www.cnblogs.com/chris-oil/p/5001748.html
https://blog.csdn.net/qq_22509715/article/details/78993912