背景:点击右侧眼睛小图标身份中中间部分隐藏几位,姓名隐藏后两位,再次点击右侧小眼睛,展示全部,实现如下:
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时,原样显示