输入格式(掩码)类似于vue指令

Question

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

1. 只有数字可供输入
2. 输入的最后两位数字与前两位数字用一个点分隔

例如：Keyboard input"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"；。它只接受数字。您还可以设置接受数字的限制。像这样：

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

。

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

然后在输入标签中：

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

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