前言:
最近做一个项目,参考别人博客写了一个眼睛的关闭与显示
内容:
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;//此元素不会被显示
}
图片显示: