在vue中封装一个过滤器(filters)

本文介绍了如何在Vue中封装过滤器,通过创建filter.js并全局注册,提升代码可读性和可维护性。过滤器不改变原始数据,只影响渲染结果,并可通过链式调用来组合使用。此外,还讲解了过滤器接收参数和在v-bind中应用的场景,以及使用过滤器时应注意其纯函数特性,避免使用`this`。
摘要由CSDN通过智能技术生成
过滤器是一种在模板中处理数据的便捷方式,而且经常会在其他模板语言中见到。他们特别适合对字符串和数字进行简单的显示变化:例如将字符串变为正确的大小写格式,或者用更容易阅读的格式显示数字

在libs文件夹下创建filter.js文件,里面有几个常用的例子如下:

// 封装过滤器

// 根据身份证号码判断男女
let sexIdcardFilter = value => {
   
  if (!value) {
   
    return "";
  } else {
   
    let data = value.substr(16, 1) % 2 === 1 ? "男" : "女";
    return data;
  }
};

// 身份证号脱敏('331082199708094687' 转换成 '33108219********87') 第8位开始替换8个
let IDcardHide = num => {
   
  let data = num.replace(/(\d{8})\d{8}(\d*)/, "$1********$2");
  
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值