如何根据内容更改元素的 class？

Question

我有一个 Angular 2 项目，我想根据其中的内容更改元素的 class。因此，我有一个包含 {{item}} 元素的模板，以及一个包含多种样式的 .css 文件，具体取决于元素的 class。我想要做的是，根据 {{item}} 的值更改  的 class。例如，如果 item=2 比它的 class 将等于 c1，但如果 item 的值更改为 4，则它将具有 class = "c2"。

Answer 1

您可以对每个案例使用 if else 语句或对每个案例使用 switch 函数。

if(item === '2') {
  return <span class="c1">{{item}}</span>
} else if(item === '4') {
  return <span class="c2">{{item}}</span>
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

{{item}}

如何根据内容更改元素的 class？

How to change element's class depending on it's content?

html

css

angular2-template

angular