使用 v-bind:style 可以給元素綁定內聯樣式,方法與:class類似,也有對象語法和數組語法,看起來很直接在元素上寫CSS:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例</title></head><body> <div id="app"> <div :style="{ 'color': color, 'fontSize': fontSize + 'px' }"></div> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> var app = new Vue({ el: '#app', data: { color: 'red', fontSize: 14 }, }); </script></body></html>CSS屬性名稱使用駝峰命名(camelCase)或短橫分隔命名(kebab-case),渲染后的結果為:
<div style="color: red; font-size: 14px">文本</div>
大多數情況下,直接寫一串的樣式不便于閱讀和維護,所以一般寫在data或computed里,以data為例寫上面的示例:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例</title></head><body> <div id="app"> <div :style="styles"></div> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> var app = new Vue({ el: '#app', data: { color: 'red', fontSize: 14 + 'px' }, }); </script></body></html>應用多個樣式對象時,可以使用數組語法:
<div :style="[styleA, styleB]">文本</div>
在實際業務中, :style的數組語法并不常用,因為往往可以寫在一個對象里面; 而較為常用的應用是計算屬性.
另外,使用:style時,Vue.js會自動給特殊的CSS屬性名稱增加前綴,比如transform.
總結
以上所述是小編給大家介紹的Vue綁定內聯樣式問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
