在 Vue 中說(shuō)到v-bind大多數(shù)時(shí)候都是想到template中動(dòng)態(tài)綁定script中的響應(yīng)式數(shù)據(jù)。但其實(shí)在單文件組件(SFC)中，

在 Vue 中說(shuō)到v-bind大多數(shù)時(shí)候都是想到template中動(dòng)態(tài)綁定script中的響應(yīng)式數(shù)據(jù)。

但其實(shí)在單文件組件(SFC)中，<style>標(biāo)簽內(nèi)也可以使用v-bind函數(shù)綁定數(shù)據(jù)。

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

當(dāng)數(shù)據(jù)變化時(shí)，css樣式隨之變化：

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

實(shí)際的值會(huì)被編譯成哈希化的 CSS 自定義屬性，因此 CSS 本身仍然是靜態(tài)的。

自定義屬性會(huì)通過(guò)內(nèi)聯(lián)樣式的方式應(yīng)用到組件的根元素上，并且在源值變更的時(shí)候響應(yīng)式地更新。