Angular动态切换css元素样式
第一种方式,切换不同的css
step1: D:\vue\untitled3\src\app\app.component.css
.show-true {
background-color: red;
color: white;
}
.show-false {
color: white;
background-color: blue;
}
step2: D:\vue\untitled3\src\app\app.component.html
<html>
<head></head>
<body>
<div >
<span class="show-{{temp}}">test</span>
<button (click)="getData()">切换背景颜色</button>
</div>
</body>
</html>
step3: D:\vue\untitled3\src\app\app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'untitled3';
temp:boolean=false;
getData(){
if (this.temp){
this.temp = false;
}else{
this.temp = true;
}
}
}
end