v-model.number 单独用于金额输入不够，因它不校验格式，允许 e、-、+、多个小数点等非法输入，空值不转 0，且“.12”可能被误转为 12，需配合 type="number" 和 @input 清洗。
v-model.number 本身不校验金额格式，只做字符串转数字；处理金额输入需结合修饰符、类型限制和校验规则三者配合，否则容易出现 e、.、负号、多位小数等异常输入。
为什么 .number 单独用在金额上不够？
直接写 <input v-model.number="price"> 看似简洁，但存在几个典型问题：
- 允许输入
e、+、-、多个小数点（如12.34.56），最终可能转成NaN或意外数值 - 空输入或纯空白时，值仍为
""，不会自动转成0或清空 - 用户输入
"100.5"能正确转为100.5，但输入"100.50"后再删掉0，可能残留"100."导致转为100（被截断）或NaN - 不阻止非法字符显示，仅在绑定时做转换，视觉反馈滞后
推荐组合：.number + type="number" + input 事件清洗
兼顾体验与健壮性，建议这样写：
<input type="number" step="0.01" min="0" v-model.number="form.amount" placeholder="请输入金额">
并在 methods 中定义清洗逻辑：
cleanAmountInput() {
const val = String(this.form.amount);
// 只保留数字、一个点、且点不能在开头或结尾
const cleaned = val.replace(/[^0-9.]/g, '') // 删非数字和点
.replace(/\./g, (match, offset) => offset === 0 ? '' : '.') // 最多一个点，且不在开头
.replace(/\.(?=\.)|\.+$/g, '') // 去重叠点、去末尾点
.replace(/^\.(\d)/, '$1') // .12 → 12，但保留 0.12
.replace(/^0+(\d)/, '$1'); // 防止 0012 → 12（可选，按业务定）
// 控制最多两位小数
const parts = cleaned.split('.');
if (parts.length > 2) {
this.form.amount = parseFloat(parts[0] + '.' + parts[1].slice(0, 2));
} else if (parts.length === 2) {
this.form.amount = parseFloat(parts[0] + '.' + parts[1].slice(0, 2));
} else {
this.form.amount = parseFloat(cleaned) || 0;
}
}
注意：type="number" 提供原生键盘优化（移动端数字键盘），.number 保证失焦/回车后绑定值是数字，@input 实时拦截非法内容。
Element Plus / Ant Design Vue 表单校验写法
以 Element Plus 为例，搭配 el-form 和 rules：
rules: {
amount: [
{ required: true, message: '金额不能为空', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!value && value !== 0) {
callback('请输入有效金额');
} else if (isNaN(value) || value
<p>关键点：</p>
- 校验触发用
blur，避免输入中频繁报错 - 先判
!value && value !== 0，因为0是合法金额，但0在 JS 中为 falsy - 正则
/^\d+(\.\d{1,2})?$/确保格式合规（如100、100.5、100.50合法，100.、100.555不合法）
进阶技巧：防抖提交 + 默认值兜底
金额常用于计算总价等场景，建议在表单提交前统一处理：
handleSubmit() {
// 强制转数字并设默认值
this.form.amount = Number(this.form.amount) || 0;
// 校验是否为有限正数
if (!isFinite(this.form.amount) || this.form.amount
<p>同时可加 <code>v-model.lazy.number</code> 降低响应式更新频率（适合长表单），但注意：它只改变同步时机，不替代清洗和校验。</p>
