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

Question

我有一个Angular 2项目，我想根据它的内容更改元素的类。所以，我有一个带有<span>{{item}}</span>元素的模板，以及一个带有多个样式的 .css 文件，具体取决于元素的类。我想要做的是，根据<span>的值来改变{{item}}的类。 例如，如果item=2比其类别等于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

<span class="c{{(item/2)|number}}">{{item}}</span>