vue element input 保留两位小数

Vue Element UI Input 组件限制输入值保留两位小数
为了确保 Element UI 的 Input 组件能够限制用户输入并保持数值为两位小数，可以采用多种方式来实现这一功能。一种常见的方式是在绑定的数据模型上应用过滤器或监听器，在每次数据变化时处理该逻辑。
方法一：使用 watch 监听器配合正则表达式
通过监视 v-model 所绑定的变量的变化，并利用 JavaScript 中的正则表达式去除多余的字符，从而达到控制精度的目的：
data() {
return {
inputValue: ''
}
},
watch: {
inputValue(newValue) {
this.inputValue = newValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
}
}
登录后复制
此段代码会在检测到 inputValue 发生改变的时候自动触发，它会移除超过两个小数位后的任何额外数字[^1]。
方法二：自定义指令
创建一个新的全局或局部指令用于格式化输入框的内容也是一个不错的选择。这种方式更加灵活，可以直接作用于特定的 <el-input> 标签之上而无需改动业务逻辑层面上的东西。
// 定义一个名为 'format-number' 的指令
Vue.directive('format-number', {
inserted(el, binding) {
el.addEventListener('input', function(event){
let value = event.target.value;
// 使用正则匹配只留下合法的小数形式
value = value.match(/^\d*\.?\d{0,2}/)[0];
event.target.value = parseFloat(value).toFixed(2);
});
}
});
登录后复制
之后就可以像这样简单地将其应用于任意数量的输入字段中了:
<el-input v-format-number v-model="inputValue"></el-input>
登录后复制
这种方法的好处在于它可以很容易地被复用，并且不会干扰其他部分的功能[^4]。
方法三：基于现有插件扩展
如果项目中有多个地方需要用到类似的验证规则，则考虑引入第三方库如 Vuelidate 或者直接借用社区内已有的解决方案可能会更高效一些。这些工具通常提供了丰富的内置校验规则集，同时也支持自定义规则以便满足特殊需求。
对于简单的场景来说，上述两种方案应该已经足够解决问题；而对于更为复杂的应用程序而言，选择合适的框架级插件可能是更好的长期投资[^3]。