angular 中的[ngClass]、[ngStyle]

博客转载了一篇文章,未提及具体内容,仅给出链接https://www.cnblogs.com/loaderman/p/10894831.html ,原标签为javascript。
<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;
}

   效果:

转载于:https://www.cnblogs.com/loaderman/p/10894831.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值