方式一：通过添加@input事件

inputValid.js

/**
 * 用法 <input @input="$inputValid.validInputIsMatchNaturalNum($event, 5)">
 * */


/**
 * 绑定到@input事件，过滤输入，只能是小数。
 * event: 事件对象
 * decimalDigits: 可以输入的最大小数位数
 * decimalDigits: 可以输入的最大长度
 * */
function validInputIsMatchDecimal(event, decimalDigits, maxLength) {
  var oriText =   event.target.value;
  event.target.value = validStrIsMatchDecimal(event.target.value, decimalDigits);
  if (maxLength != null && maxLength > 0) {
    event.target.value = event.target.value.slice(0, maxLength)
  }
   if (oriText != event.target.value) {
      input.dispatchEvent(new Event("input"))
   }
}

function validStrIsMatchDecimal(value, decimalDigits) {
    if(decimalDigits == 2){
        value = value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
    } else {
        value = value.replace(/[^\d]/g,""); //清除"数字"和"."以外的字符
    }

    value = value.replace(/^\./g,""); //验证第一个字符是数字
    value = value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
    value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    if (decimalDigits != 0) {
        var regStr = '\^(\\-)*(\\d+)\\.(\\d' + '{' + decimalDigits + '})' + '.*$';
        var reg = new RegExp(regStr, 'gi');
        value = value.replace(reg, '$1$2.$3');
    }
    //防止输入01
    if (value.indexOf(".") < 0 && value != "") {
        value = parseInt(value);
    }
    return value;
}

/**
 * 绑定到@input事件，过滤输入，只能是自然数。
 * maxLength:长度
 * */
function validInputIsMatchNaturalNum(event, maxLength) {
  var input = event.target;
  var oriText = input.value;
  input.value = input.value.replace(/[^\d]/g,""); //清除"数字"以外的字符
  //防止输入01
  if (input.value != "") {
    input.value = parseInt(input.value);
  }
  if (maxLength != null && maxLength > 0) {
    input.value = input.value.slice(0, maxLength)
  }
  if (oriText != input.value) {
    input.dispatchEvent(new Event("input"))
  }
}

function  isPureFloat(text) {
    var reg = new RegExp("(^[0]\\.[0-9]*$)|(^[1-9]{1}(\\d*)\\.[0-9]*$)|(^[1-9]{1}(\\d*)$)|(^0$)");
    var result = reg.test(text);
    return result;
}


export const inputValid = {
  validInputIsMatchNaturalNum: validInputIsMatchNaturalNum,
  validInputIsMatchDecimal: validInputIsMatchDecimal
}

使用方式
1、在main.js中，将inputValid绑定到Vue全局属性中

import { inputValid} from "./util/inputValid";
Vue.prototype.$inputValid = inputValid;

2、在input组件中使用

 <input @input="$inputValid.validInputIsMatchNaturalNum($event, 5)">

这里解释下，为什么要写

 input.dispatchEvent(new Event("input"))

因为v-model绑定的对象是监听了input事件。我们监听input事件，对target.value作出的修改不会对v-model绑定的对象做出想改

方式二：通过添加指令

inputValid.js

import Vue from 'vue'


Vue.directive('input-number-0', {
  bind(el, binding, vnode) {
    var flag = true;
    const target = el instanceof HTMLInputElement ? el : el.querySelector("input");
    target.addEventListener("input", event => {

      var input = event.target;
      var oriText = input.value;
      input.value = input.value.replace(/[^\d]/g,""); //清除"数字"以外的字符
      //防止输入01
      if (input.value != "") {
        input.value = parseInt(input.value);
      }
      if (maxLength != null && maxLength > 0) {
        input.value = input.value.slice(0, maxLength)
      }
      if (oriText != input.value) {
        //手动修改v-model值
        input.dispatchEvent(new Event("input")) 
      }
    })
  }
})

使用方式
1、在main.js中引入

import {} from "./util/inputValid"

2、在input中添加指令v-input-number-0

 <input v-input-number-0 v-model="popData.num"/>