在 Vue 中說到v-bind大多數時候都是想到template中動態綁定script中的響應式數據。但其實在單文件組件(SFC)中, ...
在 Vue
中說到v-bind
大多數時候都是想到template
中動態綁定script
中的響應式數據。
但其實在單文件組件(SFC)中,<style>
標簽內也可以使用v-bind
函數綁定數據。
如上圖第18行代碼,使用v-bind(color)
綁定了數據。
當數據變化時,css樣式隨之變化:
原理:(截取自Vue官方文檔)
實際的值會被編譯成哈希化的 CSS 自定義屬性,因此 CSS 本身仍然是靜態的。
自定義屬性會通過內聯樣式的方式應用到組件的根元素上,並且在源值變更的時候響應式地更新。