**
在 Vue 中可以通过自定义指令来实现输入框只能输入数字或者小数的功能。以下是一个示例:
**
<template>
<input v-numberOnly v-model="inputValue" type="text" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
directives: {
numberOnly: {
bind(el) {
el.handler = function (event) {
const input = event.target;
input.value = input.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
};
el.addEventListener('input', el.handler);
},
unbind(el) {
el.removeEventListener('input', el.handler);
}
}
}
};
</script>
- 在上述代码中,定义了一个名为numberOnly的自定义指令,在指令的bind方法中添加了一个输入事件监听器,对输入值进行正则替换,只保留数字和小数点,并且确保小数点只能有一个。在unbind方法中移除了监听器。