隐藏手机号中间四位

mobile = mobile .substring(0,3) + "****" + mobile.substring(7, mobile.length());
### 实现手机号加密 为了在 `el-input` 组件中实现手机号加密,在用户输入手机号时可以采用即时显示部分隐藏的方式,即只显示前三位和后四位中间位用星号(*)代替。这可以通过 Vue 的计算属性或过滤器来完成。 对于 Element UI 中的 `el-input` 输入框,可以在绑定 v-model 后通过监听 input 或 change 事件处理函数来进行数据转换: ```html <template> <div class="demo"> <!-- 使用v-model双向绑定value --> <el-input placeholder="请输入手机号" v-model="phoneVisible" @input="handlePhoneInput"></el-input> <!-- 显示加密后的手机号 --> <p>已加密手机号:{{ encryptedPhone }}</p> </div> </template> <script> export default { data() { return { phoneValue: '', // 存储原始手机号码 phoneVisible: '' // 双向绑定到输入框的内容 }; }, computed: { // 计算属性用于生成加密版本的电话号码字符串 encryptedPhone() { let temp = this.phoneValue; if (temp.length === 11) { // 假设为标准中国大陆手机长度 return `${temp.slice(0, 3)}****${temp.slice(-4)}`; } return ''; } }, methods: { handlePhoneInput(event){ const value = event.target.value.replace(/\D/g,''); // 移除非数字字符 this.phoneValue = value; // 更新内部存储的真实值 this.phoneVisible = this.encryptedPhone; // 将加密结果显示给用户看 } } }; </script> ``` 上述代码实现了如下功能: - 用户每次修改输入框中的内容都会触发 `@input` 事件处理器; - 处理程序会清理掉任何非数字字符并更新实际保存的数据; - 随着真实数值的变化,计算属性自动重新评估,并返回格式化过的、带有掩码的新字符串作为视觉反馈提供给用户[^1];
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值