Vue按钮控制身份证号码显示隐藏中间部分

在实际开发中经常会遇到点击小眼睛图标控制身份证号码显示隐藏的情况。比如：

这是我在实际开发中遇到的问题，或许方法有点笨，但是可以实现，有大神请指教。
1.首先在data中保存数据，并且定义一个布尔值变量用于控制显示隐藏。

  data(){
    return{
      idCard:'1111111111111111111',
      bool:true
    }
  },

2.在页面里用mastache语法和三元表达式进行判断。
如果为true默认显示隐藏的身份证号码，为false显示完整的身份证号码。并为下面的小眼睛按钮添加点击事件。

          <span>身份证号：</span>
          <span>{{bool?idCard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):idCard}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="el-icon-view" @click="hideNumber"></i>

3.点击事件，对变量bool取反。

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