不能用 filters 或插值表达式格式化银行卡号，因其只读且无法干预 v-model 双向绑定；必须用 @input + 正则清洗 + 光标修复实现输入即格式化，避免空格重复、粘贴错乱和删除异常。
uni-app 中如何用过滤器格式化银行卡号
直接在 v-model 绑定的输入框上做实时格式化，既不能用纯正的 Vue 过滤器（因为过滤器不支持双向绑定），也不能靠 @input 里简单 replace 就完事——容易光标跳、粘贴错乱、删除异常。
为什么不能用 filters 或 {{ cardNo | formatCard }}
uni-app 的 Vue 版本（通常是 2.6+）虽支持过滤器语法，但它只作用于插值表达式，无法干预 v-model 的写入行为。银行卡号需要「输入即格式化」，必须拦截原始输入、重置值、并手动控制光标位置。
-
filters是只读的，不能改v-model绑定的数据 - 直接
cardNo.replace(/(\d{4})(?=\d)/g, '$1 ')会导致多次触发时空格被重复插入 - 用户粘贴一串 16 位数字时，需一次性处理，而非逐字符触发
推荐方案：用 @input + 正则 + 光标修复
核心逻辑是：取当前输入值 → 剥离所有非数字字符 → 每 4 位插入一个空格 → 重新赋值给绑定变量 → 同步修正光标位置（关键！）。
示例代码（Vue 2 写法，放在 methods 里）：
formatCardInput(e) {
const raw = e.target.value.replace(/\s/g, '');
const cleaned = raw.replace(/\D/g, '');
let formatted = '';
for (let i = 0; i < cleaned.length; i++) {
if (i > 0 && i % 4 === 0) formatted += ' ';
formatted += cleaned[i];
}
// 防止重复触发导致无限循环
if (this.cardNo !== formatted) {
this.cardNo = formatted;
// 延迟修复光标（避免 Vue 异步更新导致失效）
this.$nextTick(() => {
const input = e.target;
const pos = this.getCaretPosition(input);
input.setSelectionRange(pos, pos);
});
}
},
getCaretPosition(input) {
const value = input.value;
const start = input.selectionStart;
let count = 0;
for (let i = 0; i < start; i++) {
if (value[i] === ' ') count++;
}
return start + count;
}
注意：getCaretPosition 不是简单返回 selectionStart，而是要补偿已插入的空格数，否则每次格式化后光标都会跳到末尾。
兼容性与边界情况提醒
这个方案在 H5 和微信小程序中表现一致，但 App 端（iOS/Android）的原生输入框对 setSelectionRange 支持不稳定，建议加 try/catch；另外要注意以下几点：
- 用户连续快速输入时，
$nextTick可能不够及时，可改用setTimeout(..., 0)更稳妥 - 如果用了
v-model.lazy，就完全失去实时性，不适用 - 若后端要求无空格提交，务必在提交前用
this.cardNo.replace(/\s/g, '')清洗 - 部分安卓机型软键盘回删键可能触发两次
input，需加防抖（如节流 100ms）
真正难的不是正则，而是光标位置和多端一致性——别跳过测试粘贴、长按删除、切换输入法这些场景。
