Vue 特化整合‐樣式綁定 - daniel-qa/Vue GitHub Wiki

Vue 的 :style 綁定

為什麼不能直接寫 flex-direction？

在 CSS 中，語法確實是固定的 flex-direction: column;。

但在 Vue 的 :style 綁定（JavaScript 對象）中，情況有點不同。這是一個常見的陷阱，主要原因在於 JavaScript 的語法限制：

在 JavaScript 中，物件的鍵（Key）如果包含連字號 -，會被視為「減法運算子」。

❌ style="{ flex-direction: 'column' }"：JavaScript 會以為你要計算 flex 減去 direction，導致語法錯誤。

• 兩種解決方案

當你在 Vue 的 :style 裡寫樣式時，你有兩種選擇：

1 .駝峰式命名 (CamelCase) - 推薦：

2 .將連字號去掉，後面的單字首字母大寫。

HTML

:style="{ flexDirection: 'column' }"

使用引號包裹：

如果你堅持要寫原始的 CSS 名稱，就必須用引號把它變成字串。

HTML

:style="{ 'flex-direction': 'column' }"