Vue繫結內聯樣式
阿新 • • 發佈：2018-11-08
使用 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.
發現文章中的錯誤，或者有更好的建議，歡迎評論或進前端全棧群：866109386，來交流討論吹水。