vue中实现点击右侧图标显示全部姓名身份证和隐藏中间部分内容

背景：点击右侧眼睛小图标身份中中间部分隐藏几位，姓名隐藏后两位，再次点击右侧小眼睛，展示全部，实现如下：

1.在data中定义一个变量控制

data() {return {cardBool: true,personInfo: {name: "张小明",idCard: "134456324521",},}}

2.页面中

<div class="sess-bot-two"><span>{{cardBool? personInfo.name.replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g,"$1*"): personInfo.name}}</span><span>{{cardBool? personInfo.idCard.replace(/^(.{6})(?:\w+)(.{4})$/,"\$1********\$2"): personInfo.idCard}}</span><span><van-icon@click="hideNumber"v-show="cardBool"name="closed-eye"/><van-icon @click="hideNumber" v-show="!cardBool" name="eye-o" /></span></div>

3.方法中

//隐藏身份证 姓名hideNumber() {this.cardBool = !this.cardBool;},

原理：用一个变量来控制显示成什么样，变量为true，正则判断进行隐藏，变量为false时，原样显示