输入格式(掩码)，如vue指令

Question

当我输入这样的输入时，我需要一种行为：

1. 只用于输入
2. ，输入的最后两位数由点

分隔。

例如:键盘输入"5“-显示在输入"0.05”。键盘输入"1005“-显示在输入"10.05”。

这就是我现在所拥有的：

Vue.directive('format', {
  bind(el: HTMLElement, binding: any, vnode: VNode) {
    const { modifiers } = binding;
    const targetElement = el;

    if (modifiers.cost) {
      targetElement.addEventListener('input', (e: any) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
      });
    }
  },
  update(el: HTMLElement, binding: any, vnode: VNode) {
    const { modifiers } = binding;
    const targetElement = el;

    if (modifiers.cost) {
      targetElement.addEventListener('input', (e: any) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
      });
    }
  },
});

我真的很感谢你的帮助。

Answer 1

1. 您可以在input标记中指定type="number"“。它只接受数字。您还可以设置接受哪些数字的限制。如：

1. 使用Vue中的filter。在您的Vue实例

中

。

new Vue({
    ...
    filters: {
        addDot(number) {
            return number / 100
        }
    },
    //your other properties
})

然后在输入标签中：

<input type="number" min="0" :value="inputNumber | addDot" />

确保数据属性中有变量inputNumber，这基本上就是存储输入值的地方。