Aurelia绑定CSS类

Question

我在转发器中有一个HTML元素,我想根据四个条件更改类.该条件基于JSON的属性.该属性称为type,和我一起工作的CSS类的red,blue和green.The条件是:

1. if type= red然后分配css类red
2. 如果type=蓝色则分配css类blue
3. 如果type=绿色,则分配css类green
4. 如果type未定义或null,则分配css类red

由于我对AngularJS的经验有限,我知道我可以使用该ng-style属性设置条件CSS .我如何使用Aurelia实现这一目标？

示例HTML标记

<div repeat.for="item of projects" class="col-lg-6">
    <div class="card-header">
        <!-- I want to change the css class red based on the value of the JSON attribute type -->
        <div class="component-type red">
            ...
        </div>
    </div>
    ...
</div>

Answer 1

在类元素上使用字符串插值.

<div repeat.for="item of projects">
  <div class="${item.type || 'red'}">...</div>
</div>

请点击此处查看Ninja Turtle的工作:https://gist.run/？ id = 3a588894a6b8d12666ba4f64645270aa