1. Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）

1.1 图片

1.1.1 本地图片：

我们在assets目录下面新建images文件夹并且往里面放入图片

<h1>引入图片</h1>
<img src="assets/images/虎牙.png" alt="虎牙">

1.1.2 网络图片（绑定图片）

  public picUrl: string ='https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

<h1>引入图片</h1>
<img [src]="picUrl" alt="">

1.3 条件判断 *ngIf（只要ngif else用条件取反代替）

1.3.1 示例01:

public flag: boolean = true;

<div *ngIf="flag"><img src="assets/images/01.png" alt="TRUE">
</div>
<div *ngIf="!flag"><img src="assets/images/02.png" alt="FALSE">
</div>

1.3.2 示例02：

  public list: any[] = [{ title: '我是新闻01' },{ title: '我是新闻02' },{ title: '我是新闻03' },{ title: '我是新闻04' },{ title: '我是新闻05' },];

<h1>让索引值为1的数据变为红色</h1>
<ul><li *ngFor="let item of list; let key = index"><span *ngIf="key==1" class="red"> {{key}} --> {{item.title}}</span><span *ngIf="key!=1"> {{key}} --> {{item.title}}</span></li>
</ul>

.red{color: red;
}

1.4 ngSwitch

  /* 1表示已经支付   2支付并且确认订单   3、表示已经发货   4表示已经收货   其他、无效*/public orderStatus: number = 3;

<h1>条件判断语句 ngswitch</h1>
<span [ngSwitch]="orderStatus"><p *ngSwitchCase="1">表示已经支付</p><p *ngSwitchCase="2">支付并且确认订单</p><p *ngSwitchCase="3">表示已经发货</p><p *ngSwitchCase="4">表示已经收货</p><p *ngSwitchDefault>无效订单</p>
</span>

1.5 属性[ngClass]、[ngStyle]

1.5.1 [ngClass]

ngClass演示（尽量不要用dom来改变class）

1.5.1.1 示例01：

public flag: boolean = true;

.red{color: red;
}
.orange{color:orange;
}
.blue{color:blue;
}

<h1>属性[ngClass]、[ngStyle]</h1>
<div class="red">ngClass演示 （尽量不要用dom来改变class）
</div>
<div [ngClass]="{'blue':true,'red':false}">ngClass演示
</div>
<hr>
<div [ngClass]="{'orange':flag,'red':!flag}">ngClass演示
</div>

1.5.1.2 示例02：

<strong>循环数组，让数组的第一个元素的样式为red ,第二个为orange</strong>
<ul><li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==0,'orange':key==1,'blue':key==2}">{{key}}---{{item.title}}</li>
</ul>

1.5.2 [ngStyle]

  public attr: string = 'orange';

<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签 </p>

Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）相关推荐

Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch
Angular数据循环 *ngFor 与条件判断 *ngif 和 *ngSwitch 首先,进行Angular环境的搭建和项目创建 ctrl + c 结束服务 1.新建模块 ng g compone ...
angular学习-*ngFor,*ngIf,*ngSwitch
*ngFor,*ngIf,*ngSwitch学习记录 1.*ngFor 2.*ngIf 3.*ngSwitch 1.*ngFor 一般用于数据循环,例子(打印arr里边的值)如下: ts: html: ...
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
mysql 属性函数_4-MySQL函数（字段处理函数条件判断函数）
一.字段处理函数字符串处理函数: concat(field1,field2 -- ) substr(str,pos,len) replace(str,old_str,new_str)[Hive:re ...
angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...
java中数字作为布尔值_day50 java Script 数字和字符串布尔值和数组运算符条件判断和三元运算...
上节回顾: day501.前情回顾 CSS属性: float浮动的规则1. 浮动规则: 浮动只控制自己如果前面的标签也是浮动的,就挨着放如果前面的标签不浮动,则下方摆放如果把块级标签设置成浮动, ...

Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）

1. Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）

1.1 图片

1.1.1 本地图片：

1.1.2 网络图片（绑定图片）

1.3 条件判断 *ngIf（只要ngif else用条件取反代替）

1.3.1 示例01:

1.3.2 示例02：

1.4 ngSwitch

1.5 属性[ngClass]、[ngStyle]

1.5.1 [ngClass]

1.5.1.1 示例01：

1.5.1.2 示例02：

1.5.2 [ngStyle]

Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）相关推荐

最新文章

热门文章