[Vue] CSS中的v-bind

在 Vue 中說到v-bind大多數時候都是想到template中動態綁定script中的響應式數據。

但其實在單文件組件(SFC)中，<style>標簽內也可以使用v-bind函數綁定數據。

如上圖第18行代碼，使用v-bind(color)綁定了數據。

當數據變化時，css樣式隨之變化：

原理：（截取自Vue官方文檔）

實際的值會被編譯成哈希化的 CSS 自定義屬性，因此 CSS 本身仍然是靜態的。

自定義屬性會通過內聯樣式的方式應用到組件的根元素上，並且在源值變更的時候響應式地更新。