vue綁定內聯樣式

v-bind:style 的對象語法十分直觀——看着非常像 CSS ，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
 
data: {  activeColor: 'red',  fontSize: 30}
 

直接綁定到一個樣式對象通常更好，讓模板更清晰：

<div v-bind:style="styleObject"></div>
 
data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}
 

實踐，有個div的屬性中需要設置background，這里的圖片是從數據庫讀取的，是用戶的頭像！

v-bind:style="{ background: 'url(' +headimgurl + ') no-repeat' }"

搞定！

之前我嘗試着直接寫，

style = "background:'url({{headimgurl}}) no-repeat'"

發現報錯，后來查看文檔，才發現應該用上面的方式！