Aurelia 绑定(bind) CSS 类

Question

我在转发器中有一个 HTML 元素，我想根据四个条件更改类。该条件基于 JSON 中的属性。该属性称为 type，我正在使用的 css 类是 red、blue 和 green。条件是:

1. 如果type = red，则分配CSS类red
2. 如果type = blue，则分配CSS类blue
3. 如果type = green，则分配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>

在此处查看忍者神龟的工作要点:https://gist.run/?id=3a588b94a6b8d12666ba4f64645270aa