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

LONGYog

于 2022-05-09 09:10:57 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 javascript vue

本文链接：https://blog.youkuaiyun.com/LONGYog/article/details/124607094

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Vue中利用filters过滤器来实现前端银行卡号的中间部分和姓名后两位的隐藏，以保护用户隐私。通过示例代码展示了具体的实现方法。

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

Vue 实现前端银行卡隐藏中间的数字

主要应用了 filters过滤器 来实现效果
实现效果，如图：
在这里插入图片描述
HTML代码：

<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>

JavaScript代码：

<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>