angular 中的[ngClass]、[ngStyle]
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div</div>
<div [ngClass]="{'red': flag, 'blue': !flag}">这是一个 div </div>
<ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{'red': i==0}">{{item}}</span>
</li>
</ul>
<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>
.red{ color: red } .blue{color: blue}
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'angulardemo'; inputValue='0' attr='red' arr= [1, 3, 4, 5, 6] public flag=false; }
效果:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-05-20 16:25 LoaderMan 阅读(2339) 评论(0) 编辑 收藏 举报