使用vue自定义指令实现一个校验input只能输入数字

可以使用Vue自定义指令来实现一个校验input只能输入数字的功能。具体实现步骤如下：

1. 在Vue实例中定义一个全局自定义指令，例如：v-only-number。

Vue.directive('only-number', {
  bind: function(el) {
    el.handler = function(e) {
      if (!/^\d+$/.test(e.target.value)) {
        e.target.value = e.target.value.replace(/[^\d]/g, '')
      }
    }
    el.addEventListener('input', el.handler)
  },
  unbind: function(el) {
    el.removeEventListener('input', el.handler)
  }
})

2. 在模板中使用v-only-number指令来绑定input元素。

<template>
  <div>
    <input type="text" v-only-number />
  </div>
</template>

3. 在输入框中输入非数字字符时，自定义指令会监听到input事件并执行校验逻辑，将非数字字符替换为空字符串。

这样，就可以实现一个校验input只能输入数字的功能了。