Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容

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

实现效果展示

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: 
      mailbox: 
    };
  },

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）