angular 中的[ngClass]、[ngStyle]

最新推荐文章于 2025-06-14 09:00:05 发布

转载最新推荐文章于 2025-06-14 09:00:05 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/loaderman/p/10894831.html

文章标签：

#javascript #ViewUI

博客转载了一篇文章，未提及具体内容，仅给出链接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;
}

效果：