繫結樣式

使用 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>