<h1>引入图片</h1> <img src="assets/images/02.png" alt="收藏" /> <img [src]="picUrl" /> <hr> <h1>循环数据 显示数据的索引(key)</h1> <ul> <li *ngFor="let item of list;let key=index;"> {{key}}---{{item.title}} </li> </ul> <h1>条件判断语句 *ngIf</h1> <div *ngIf="flag"> <img src="assets/images/02.png" /> </div> <div *ngIf="!flag"> <img src="assets/images/01.png" /> </div> <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> <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> <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> <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> <hr> <p style="color:red">我是一个p标签</p> <p [ngStyle]="{'color':'blue'}">我是一个p标签</p> <p [ngStyle]="{'color': attr}">我是一个p标签 </p> <br> <h1>管道</h1> {{today | date:'yyyy-MM-dd HH:mm ss'}} <h1>事件</h1> <strong>{{title}}</strong> <br> <br> <button (click)="run()">执行事件</button> <br> <br> <button (click)="getData()">执行方法获取数据</button> <br> <br> <button (click)="setData()">执行方法改变属性里面的数据</button> <br> <br> <button (click)="runEvent($event)">执行方法获取事件对象</button> <h1>表单事件 事件对象</h1> <!-- <input type="text" (keydown)="keyDown()" /> --> keyDown <input type="text" (keydown)="keyDown($event)" /> <br> keyUp: <input type="text" (keyup)="keyUp($event)" /> <h1>双休数据绑定--MVVM 只是针对表单</h1> <input type="text" [(ngModel)]='keywords' /> {{keywords}} <br> <br> <button (click)="changeKeywords()">改变keywords的值</button> <br> <br> <button (click)="getKeywords()">获取keywords的值</button> <br> <br> <br> <br> <br>
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { public title:string='我是一个title'; public picUrl='https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png'; public list:any[]=[ { "title":'我是新闻1' }, { "title":'我是新闻2' }, { "title":'我是新闻3' } ]; public flag:boolean=true; public orderStatus:number=3; /* 1表示已经支付 2支付并且确认订单 3、表示已经发货 4表示已经收货 其他、无效*/ public attr:string='orange'; public today:any=new Date(); public keywords:string='这是默认值'; constructor() { console.log(this.today); } ngOnInit() { } run(){ alert('这是一个自定义方法') } getData(){ alert(this.title); } setData(){ this.title='我是一个改变后的title'; } runEvent(event){ //ionic必须这样写 let dom:any=event.target; dom.style.color="red"; } keyDown(e){ if(e.keyCode==13){ console.log('按了一下回车') }else{ //e.target 获取dom对象 console.log(e.target.value); } } keyUp(e){ if(e.keyCode==13){ console.log(e.target.value); console.log('按了一下回车'); } } changeKeywords(){ this.keywords='我是改变后的值'; } getKeywords(){ console.log(this.keywords) } }
.css
img{ max- 200px; } .red{ color:red; } .blue{ color: blue; } .orange{ color: orange; }