uniapp实现前端银行卡隐藏中间的数字，及隐藏姓名后两位

最新推荐文章于 2024-09-26 15:39:35 发布

MFG_666

最新推荐文章于 2024-09-26 15:39:35 发布

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： uniapp知识点文章标签：前端 uni-app vue.js uniapp隐藏银行卡号

本文链接：https://blog.csdn.net/m0_49714202/article/details/135247461

uniapp知识点专栏收录该内容

64 篇文章

订阅专栏

本文介绍了如何使用Vue的filters功能，通过substring方法实现银行卡号显示时隐藏中间部分的数字，提供了一个简单的代码示例和实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 实现前端银行卡隐藏中间的数字
主要应用了 filters过滤器来实现效果
实现效果，如图：
在这里插入图片描述

<template><div><div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"><p>原来：{{ cardNo }}</p><p>隐藏后：{{ cardNo | hideMiddle }}</p><br><p>原来：{{ name }}</p><p>隐藏后：{{ name | hideMiddle2 }}</p></div></div>
</template>

<script>
export default {filters: {hideMiddle(val) {return `${val.substring(0, 3)}****${val.substring(val.length - 4)}`},hideMiddle2(val) {return `${val.substring(0, 1)}**${val.substring(val.length)}`}},data () {return {cardNo: '68998983480932342',name: '张小三'}}
}
</script>

自己实战

<view class="card-top-lft-ctr-btm">
{{item.bank_card.substring(0, 3) +  '****'  +  item.bank_card.substring(item.bank_card.length - 4)}}
</view>

图片

在这里插入图片描述