uni-app中filters不支持双向绑定，需用v-model+@input手动控制输入逻辑：清洗非数字字符、按四位加空格、限制长度19、修复光标位置，并注意ios输入法兼容性及提交前清洗空格校验。
uni-app 的 filters 不支持双向绑定，别白费劲写过滤器了
直接在 v-model 上用过滤器（比如 {{ cardNo | formatCard }}）只能做显示层格式化，用户一输入就乱——因为过滤器不改变原始值，光靠它没法实现「边输边加空格」的交互效果。uni-app 的 Vue 2 兼容模式下，filters 是只读的，不能拦截输入事件或修改绑定值。
用 v-model + @input 组合手动控制输入逻辑
核心思路：放弃过滤器，改用受控输入，每次用户按键后，主动清洗并格式化字符串，再写回数据字段。关键点在于「防循环触发」和「光标位置维护」，否则会出现光标跳到末尾、删除键失灵等问题。
实操建议：
- 用
@input替代v-model，自己接管输入逻辑 - 输入值先去除所有非数字字符（
value.replace(/\D/g, '')），再按每四位插入空格（value.replace(/(\d{4})(?=\d)/g, '$1 ')） - 必须限制最大长度为 19（16 位卡号 + 3 个空格），避免输超
- 如果用
ref拿到<input>元素，可在格式化后手动恢复光标位置（uni-app 中需用this.$nextTick()确保 DOM 更新）
简单示例：
<input :value="cardNo" placeholder="请输入银行卡号">
data() {
return {
cardNo: ''
}
},
methods: {
onCardInput(e) {
let value = e.target.value.replace(/\D/g, '')
if (value.length > 16) value = value.slice(0, 16)
this.cardNo = value.replace(/(\d{4})(?=\d)/g, '$1 ')
}
}
注意 iOS 键盘在 input 中的兼容性坑
iOS 微信 WebView 和部分安卓 WebView 下，@input 在中文输入法下可能触发不及时，或拼音未上屏就格式化，导致删掉拼音首字母后卡住。这不是 uni-app 特有，而是底层 Webview 输入事件缺陷。
绕过方案：
- 改用
@blur做最终格式化（适合表单提交前校验场景） - 加个防抖
@input，延迟 200ms 再执行格式化（牺牲一点实时性换稳定性） - 业务允许的话，直接禁用中文输入法：
inputmode="numeric"+pattern="[0-9]*"（uni-app 支持这些原生属性）
提交前还得清洗空格，别忘了后端校验
前端展示的带空格格式只是给用户看的，真正传给后端的必须是纯数字。别指望后端帮你去空格——很多银行接口对卡号格式极其敏感，多一个空格就签名失败。
提交时务必再处理一次：
const cleanCardNo = this.cardNo.replace(/\s/g, '')
而且要检查 cleanCardNo.length === 16 || cleanCardNo.length === 19（部分卡种如美国运通是 15 位），别只图前端好看，漏掉长度校验。
最麻烦的其实是光标位置修复和输入法兼容，这两块没现成银弹，得根据实际测试机型反复调。
