......
当前位置:   article > 正文

[ngClass]的简单使用

ngclass

[ngClass]官方定义:从 HTML 元素上添加和移除 CSS 类。

参考链接:官方文档Angular中[ng-class]的使用

使用方法:

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

其中key(例如代码中的first)值代表的是css样式,value值为boolean型,true为显示该样式,false为不显示该样式

代码实践:

<div [ngClass]="{'class1':flag1,'class2':flag2,'class3':flag3}">
      <div class="data">
      <p style="font-size:25px;">{{value1}}</p>
      <p style=" height: 10%;margin-top: 11%">/{{value2}}%</p>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5

通过flag1,falg2,flag3来控制class1,class2,class3样式的显示

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/436158
推荐阅读