angular样式绑定

style.propertyName

[style.Css属性名] = ‘Css属性值变量’/‘css属性值’

// app.component.ts
export class AppComponent {
    fontSize = '32px';
}

// app.component.html
<div [style.fontSize]="fontSize" [style.color]="'red'">styleBinding</div>
ngStyle

[ngStyle]="{‘css属性名’: ‘css属性值’}"

[ngStyle]="{‘css属性名’: 判断语句 ?‘判断语句为true时的css属性值’ : ‘判断语句为false时的css属性值’}"

// app.component.ts
export class AppComponent {
    isMax = false;
}

// app.component.html
//Css属性值-固定值
<div [ngStyle]="{'color': 'red'}">ngStyle</div>
//Css属性值-通过判断取值
<div [ngStyle]="{'font-size': isMax ? '24px' : '12px'}">ngStyle-添加判断</div>
.ngClass

[ngClass]="{‘需要添加的类名’: 判断语句}" 当条件为ture时,添加类;为false时,不添加该类

// app.component.ts
export class AppComponent {
    isActive = true;
     isFocus = true;
}

// app.component.html
// 一个类通过判断添加
<div [ngClass]="{'active': isActive}">ngClass</div>
// 多个类通过判断添加时,用逗号隔开
<div [ngClass]="{'active': isActive, 'primary': isFocus}">ngClass</div>

// app.component.css
.active { background: #d0d0d0;}
.primary { color: #198fff; }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值