绑定样式

使用 Aurelia 绑定到浏览器本机 style 属性。如果使用字符串插值，则应使用 css 别名，以便在 Internet Explorer 中使用样式。

样式字符串

export class MyViewModel {
  constructor() {
    this.styleString = 'color: #F2D3D6; background-color: #333';
  }
}

<template>
  <div style.bind="styleString"></div>
</template>

样式对象

export class MyViewModel {
  constructor() {
    this.styles = {color: '#F2D3D6', 'background-color': '#333'};
  }
}

<template>
  <div style.bind="styles"></div>
</template>

字符串插值

与上面的字符串绑定非常相似，这允许你使用字符串插值来绑定到样式。如果任何值发生更改，它们将相应地在视图中更新。

注意： 对于 Internet Explorer 兼容性，我们使用别名 css 来绑定样式。这可确保字符串插值在 Internet Explorer 中有效。

export class MyViewModel {
    color = 'red';
    height = 350;
    width = 350;
}

<template>
    <div css="width: ${width}px; height: ${height}px; color:${color}">My Text</div>
</template>