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

最新推荐文章于 2025-01-17 17:16:38 发布

原创最新推荐文章于 2025-01-17 17:16:38 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue

Vue 专栏收录该内容

13 篇文章

订阅专栏

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

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>