vue自定义指令校验输入为2位小数数字

Vue 是一款流行的前端框架，可以自定义指令来实现特定的功能。如果要校验输入为 2 位小数数字，可以自定义一个指令来实现。

首先，需要在 Vue 中注册一个自定义指令。指令分为全局指令和局部指令，在这里我们注册一个局部指令。

Vue.directive('decimal', {
  bind: function(el, binding, vnode) {
    // 逻辑代码
  }
})

然后，在 bind 钩子中编写校验逻辑。校验逻辑可以使用正则表达式。可以使用 v-model 指令将输入框和指令绑定。

Vue.directive('decimal', {
  bind: function(el, binding, vnode) {
    el.addEventListener('input', function() {
      let input = this.value;
      if (input.indexOf('.') != -1) {
        input = input.substring(0, input.indexOf('.') + 3);
      }
      let reg = /^\d+(\.\d{1,2})?$/;
      if (reg.test(input)) {
        vnode.componentInstance.$emit('input', input);
      } else {
        this.value = binding.value;
      }
    });
  }
})

这段代码中，使用 addEventListener 给输入框添加 input 事件监听器。在监听器中对输入的值进行校验，如果输入的值不符合要求，则将输入框的值改为之前的值。

最后，将指令绑定到输入框上。

<input v-model="number" v-decimal />

这样，输入框就可以校验输入为2位小数数字了。