关于前端:vue的input中限制只能输入number

<template>    <input v-model.number="datanumber" :max="max" :min="min"  @input="onlyInputNumber" @blur="onlyNumberBlur"></template><script>// input 只容许输出整数const onlyNumber = (num) => {  let n = String(num)  const t = n.charAt(0)  // 先把非数字的都替换掉，除了数字和.  n = n.replace(/[^\d\\.]/g, '')  // 必须保障第一个为数字而不是.  n = n.replace(/^\./g, '')  // 必须保障第一个数子非0  n = n.replace(/^0\d+/g, '0')  // 保障只有呈现一个.而没有多个.  n = n.replace(/\.{2,}/g, '.')  // 保障.只呈现一次，而不能呈现两次以上  n = n.replace('.', '$#$').replace(/\./g, '').replace(    '$#$', '.')  // 如果第一位是负号，则容许增加  if (t === '-') {    n = '-' + n  }  return n}export default {  data () {    return {       max: 100,      min: 0,      datanumber: 10,    }  },   methods: {    onlyInputNumber (event) {        event.target.value = onlyNumber(event.target.value)        if (this.max !== '' && !isNaN(Number(this.max)) && (+event.target.value > +this.max)) {          event.target.value = this.max        }        if (this.min !== '' && !isNaN(Number(this.min)) && (+event.target.value < +this.min)) {          event.target.value = this.min        }        this.datanumber = event.target.value    },    onlyNumberBlur (event) {        if (isNaN(Number(event.target.value))) {          event.target.value = ''          this.datanumber = event.target.value        }    }    }}</script>