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

weixin_49203377

于 2023-02-17 14:28:10 发布

阅读量1k

点赞数 2

分类专栏： js vue遇到的问题文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_49203377/article/details/129086205

版权

vue遇到的问题同时被 2 个专栏收录

18 篇文章

订阅专栏

10 篇文章

订阅专栏

该文展示了如何在Vue.js应用中通过数据绑定和正则表达式来控制用户姓名和身份证号的显示，点击眼睛图标可切换隐藏和显示状态，以保护用户隐私。

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

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