密码掩码不该用过滤器,因小程序和app不支持且破坏v-model双向绑定;正确方案是type切换配合按钮控制,或只读时用字符串重复生成星号。

filter 在 uni-app 中仅对 H5 有效,小程序和 App 端完全不解析 | 语法——哪怕你写得再标准,微信开发者工具里也只会原样输出 {{ phone | maskPhone }},不会执行函数。
为什么密码掩盖用过滤器是错的方向
密码字段本身不该在模板里做实时掩码:用户输入时若每输一位都触发一次过滤器,既无必要又暴露逻辑(比如知道长度);更重要的是,v-model 绑定的值若被过滤器“改写”,会破坏双向绑定一致性,导致光标跳位、输入中断等现象。
- 过滤器返回值直接参与渲染,但不修改原始数据,无法响应式控制显示/隐藏态
- 密码掩码本质是 UI 层切换(明文 ↔ 星号),不是数据转换,该用
v-if/v-else或type切换 - 小程序平台连
Vue.filter都不识别,写了等于没写
真正该用的方案:type 切换 + 按钮控制
用原生 input 的 type="text" 和 type="password" 切换最可靠,不依赖任何过滤器:
<input :type="isShowPassword ? 'text' : 'password'" v-model="password"><button>
{{ isShowPassword ? '隐藏' : '显示' }}
</button>
-
isShowPassword是 data 或 ref 响应式变量,切换时浏览器自动处理渲染逻辑 - 所有端(H5 / 微信 / 支付宝 / App)均支持,无兼容性风险
- 不涉及字符串截取或正则,零性能开销
如果非要在模板里“显示星号”(比如只读场景)
那也不是过滤器的事,而是用 repeat 或 padStart 生成固定长度星号串:
{{ password ? '*'.repeat(password.length) : '' }}
- 不调用任何过滤器,纯表达式,全端生效
- 注意:不能用于
v-model,仅限只读展示 - 若需限制最大显示长度(如只掩前 6 位),用
password.slice(0, 6).replace(/./g, '*') + password.slice(6)
最容易被忽略的是:所谓“密码掩码过滤器”,在真实项目中几乎从不出现——它混淆了交互控制(type 切换)和文本渲染(星号占位)两个层面。真正在 input 上做掩码,永远优先走 type;只读展示才考虑星号字符串,且必须绕过 filters。别为一个按钮写三个过滤器注册文件。










