ionic 密码显示与隐藏

前言：

最近做一个项目，参考别人博客写了一个眼睛的关闭与显示

内容：

HTML中：

     <ion-item>
       <ion-icon item-start iso="ios-key" md="md-key"></ion-icon>
       <ion-input type="{{pwshow?'text':'password'}}" [(ngModel)]='userinfo.password' placeholder='请输入密码'></ion-input>
       <a href="javascript:;"rel="external nofollow" item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?'eyeshow':'eyehide'">
          <!-- javascript: 是一个伪协议，其他的伪协议还有 mail: tel: file: 等等。 -->
          <!-- javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。 -->
          <!-- rel="external nofollow"这个链接非本站链接，不要爬取也不要传递权重 -->
          <!-- ngClass:第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类 -->
          <ion-icon name="ios-eye-off" color="dark" class="eye-hide"></ion-icon>  <!--闭眼图标-->
          <ion-icon name="ios-eye" color="dark" class="eye-show"></ion-icon>  <!--睁眼图标-->
       </a>
     </ion-item> 

SCSS中：

.eyehide .eye-hide, .eyeshow .eye-show{
    display: block;//让对象成为块级元素
}
  .eyehide .eye-show, .eyeshow .eye-hide{
    display: none;//此元素不会被显示
}

图片显示：