zoukankan      html  css  js  c++  java
  • 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;
    }

       效果:

  • 相关阅读:
    ActiveMQ (一) 简介
    MSMQ .NET下的应用
    MSMQ
    RabbitMq C# .net 教程
    Rabbit MQ
    Dynamics 365—脚本
    DNS服务器地址汇总
    特殊字符 编码
    4s前置摄像头调用
    登陆前后导航栏处理 2015-12-12
  • 原文地址:https://www.cnblogs.com/loaderman/p/10894831.html
Copyright © 2011-2022 走看看