Vue中实现修改邮箱、手机号等流程的大致过程、验证码由后端的redis生成验证（版本1.0）

将手机号信息全部暴露出来、不太好吧。适当的隐藏一部分、似乎更加合理

实现效果展示

1、实现过程

1.1 html部分

 <span class="zyz-button-span">{
  
  { phone | phoneFilter }}</span>
 <span class="zyz-button-span">{
  
  { mailbox | mailboxFileter }}</span>

2.2 data部分

这里可以将接口数据替换掉这个假数据

  data() {
    return {
      phone: "18372818931",
      mailbox: "2966429967@qq.com",
    };
  },

2.3 script

  filters: {
    //手机号过滤器
    phoneFilter(val) {
      let reg = /^(.{3}).*(.{4})$/;
      return val.replace(reg, "$1****$2");
    },

   //邮箱过滤器
    mailboxFileter(val) {
      let reg = /^(.{3}).*(.{9})$/;
      return val.replace(reg, "$1****$2");
    },
  },

2、过滤器的相关知识

2.1 概念

过滤器：

• 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
• 语法：
  1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  2、使用过滤器：{ { xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

• 1、过滤器也可以接收额外参数、多个过滤器也可以串联
• 2、并没有改变原本的数据, 是产生新的对应的数据

2.2 更加详细的过滤器知识

Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）：https://blog.csdn.net/weixin_43304253/article/details/125861539