在 Vue 2 中，v-model.number 会自动转换为数字类型但会丢失尾随零；要始终显示如 2.00、3.50 这样的两位小数格式，需脱离双向绑定，改用 :value + @input 组合并配合 toFixed(2) 格式化。
在 vue 2 中，`v-model.number` 会自动转换为数字类型但会丢失尾随零；要始终显示如 `2.00`、`3.50` 这样的两位小数格式，需脱离双向绑定，改用 `:value + @input` 组合并配合 `tofixed(2)` 格式化。
实现核心思路是：避免直接使用 v-model.number（它会抹去格式信息），转而手动控制输入值的展示与更新逻辑。具体分为两步：
-
展示层：用
:value="formatRate(entry.rate)"确保输入框中始终显示两位小数（如3.5→"3.50"）； -
更新层：通过
@input监听原生事件，将用户输入解析为数字后存入数据（保留数值精度，供后续计算使用）。
以下是完整可运行示例：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script><div id="app">
<div v-for="(entry, index) in entries" :key="index">
<h2>{{ entry.text }}</h2>
<input type="number" step="0.01" class="form-control" :value="formatRate(entry.rate)">
</div>
</div>
new Vue({
el: "#app",
data: {
entries: [
{ text: "Rate 1", rate: 1.7 },
{ text: "Rate 2", rate: 2.00 },
{ text: "Rate 3", rate: 3.50 }
]
},
methods: {
// 将数值格式化为带两位小数的字符串（用于显示）
formatRate(value) {
return Number(value).toFixed(2);
},
// 输入时更新数值（保留原始 number 类型，便于计算）
updateRate(index, event) {
const rawValue = event.target.value;
// 允许空值或合法数字输入，避免 NaN
if (rawValue === '' || /^-?\d*\.?\d*$/.test(rawValue)) {
this.entries[index].rate = rawValue === '' ? 0 : parseFloat(rawValue);
}
},
// 失焦时强制补零（防止用户粘贴或手动删减后显示不规范）
ensureTwoDecimals(index) {
this.$nextTick(() => {
const entry = this.entries[index];
if (typeof entry.rate === 'number' && !isNaN(entry.rate)) {
entry.rate = parseFloat(entry.rate.toFixed(2));
}
});
}
}
});
✅ 关键注意事项：
-
:value绑定的是字符串格式（toFixed(2)返回字符串），因此输入框内始终可见x.xx； -
@input中使用parseFloat()转回数字类型，确保entry.rate在业务逻辑中仍可参与运算； - 添加
@blur钩子 +ensureTwoDecimals方法，可兜底处理用户手动删除小数位、粘贴非标准数值等边界情况； -
step="0.01"是良好实践，配合浏览器原生数字输入校验，但不能替代 JS 层格式化逻辑。
该方案兼顾了用户体验（视觉统一）、数据准确性（存储为 number）和兼容性（无需自定义指令或 Vue 3 特性），是 Vue 2 项目中处理「显示格式 vs 数据类型」分离问题的经典解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
