Vue.js 输入框保留两位小数，但计算使用完整值

本文介绍如何在 Vue.js 中实现一个输入框，保留两位小数显示，但实际计算时使用完整值，避免精度丢失问题。

以下代码示例演示了如何使用 Vue.js 的 v-model 指令 和 v-on:input 事件来实现这个功能。

<el-input v-on:input='needObj.unitPriceNoTaxes = needObj.unitPriceNoTaxes.replace(/[^0-9.]/g, '').replace(/(..*)./g, '$1')' v-model='needObj.unitPriceNoTaxes' :disabled='userStore.name != props.bpmTarget || props.taskOperateType != 1'
                                        placeholder='请输入内容' style='width: calc(100% - 100px);margin-right: 10px;' />

代码解释：

• v-on:input 事件会在输入框内容发生改变时触发。
• needObj.unitPriceNoTaxes = needObj.unitPriceNoTaxes.replace(/[^0-9.]/g, '').replace(/(..*)./g, '$1') 这行代码会将输入的值过滤掉非数字和点的字符，并确保只有一个点存在。
• v-model 指令用于双向绑定输入框的值和 needObj.unitPriceNoTaxes 变量。
• :disabled 属性用于控制输入框是否可编辑。

通过这种方式，用户在输入框中输入的内容会自动保留两位小数显示，但实际存储在 needObj.unitPriceNoTaxes 变量中的是完整的数值，可以用于后续的计算，避免精度丢失。

更多关于 Vue.js 的知识，可以参考官方文档：https://vuejs.org/