物件語法

v-bind:style 的物件語法十分直觀——看著非常像 CSS ，其實它是一個 JavaScript 物件。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
 

陣列語法

v-bind:style 的陣列語法可以將多個樣式物件應用到一個元素上：

<div v-bind:style="[baseStyles, overridingStyles]">

自動新增字首

當 v-bind:style 使用需要特定字首的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並新增相應的字首。

多重值

2.3.0+

從 2.3 開始你可以為 style 繫結中的屬性提供一個包含多個值的陣列，常用於提供多個帶字首的值：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">