将手机号信息全部暴露出来、不太好吧。适当的隐藏一部分、似乎更加合理
实现效果展示
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
