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>

總結

以上是生活随笔為你收集整理的Vue 实现前端银行卡隐藏中间的数字，及隐藏姓名后两位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。