angular 中的[ngClass]、[ngStyle]
<div class="cnblogs_code"><pre><div style="text-align:center">
<h1><span style="color: rgba(0, 0, 0, 1)">
Welcome to {{ title }}</span>!
</h1>
</div>
<div ="{'red': true, 'blue': false}"> 这是一个 div</div>
<div ="{'red': flag, 'blue': !flag}">这是一个 div </div>
<ul>
<li *ngFor="let item of arr, let i = index"> <span ="{'red': i==0}">{{item}}</span>
</li>
</ul>
<div ="{'background-color':'green'}">你好 ngStyle</div>
<div ="{'background-color':attr}">你好 ngStyle</div></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.red</span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> red
</span>}<span style="color: rgba(128, 0, 0, 1)">
.blue</span>{<span style="color: rgba(255, 0, 0, 1)">color</span>:<span style="color: rgba(0, 0, 255, 1)"> blue</span>}</pre>
</div>
<div class="cnblogs_code">
<pre>import { Component } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
@Component({
selector: </span>'app-root'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./app.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./app.component.scss'<span style="color: rgba(0, 0, 0, 1)">]
})
export class AppComponent {
title </span>= 'angulardemo'<span style="color: rgba(0, 0, 0, 1)">;
inputValue</span>='0'<span style="color: rgba(0, 0, 0, 1)">
attr</span>='red'<span style="color: rgba(0, 0, 0, 1)">
arr</span>=
public flag</span>=<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<p> 效果：</p>
<p><img src="https://img2018.cnblogs.com/blog/1100100/201905/1100100-20190520162430278-2122242966.png" alt=""></p>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10894831.html
頁:
[1]