angular 中的[ngClass]、[ngStyle]

angular 中的[ngClass]、[ngStyle]
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说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;
}

   效果:

angular 中的[ngClass]、[ngStyle]

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

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29813

发表评论