樣式綁定
本頁說明如何以 :[CSS 屬性] 把資料直接綁到行內樣式。
寫法
<button :width="width" :background-color="color">Save</button>
<script>
const app = new QUI({ id: "app", data: { width: "120px", color: "#3498db" } });
</script>
結果：
<button style="width: 120px; background-color: #3498db;">Save</button>
| 規則 | 說明 |
|---|---|
| 名稱 | 使用 kebab-case 的 CSS 屬性名，轉成 camelCase 後須存在於 element.style |
| 值 | 資料值或屬性值本身，需自帶單位，例如 "120px" |
| 前綴 | 只認 :；q-width 不會進 style，而是設定 width 屬性 |
:animation |
值為 fade-in 或 expand 時不寫入 style，而是視為 渲染效果 |
舊式名稱
下列寫法仍可使用，但預計在 1.0.0 移除，詳見 淘汰計畫。
| 舊寫法 | 改用 |
|---|---|
:bg-color、:bg-image 等 :bg-* |
:background-color、:background-image |
:borderRadius、:backgroundColor 等 camelCase |
:border-radius、:background-color |