Vue中通過屬性綁定為元素綁定style行內樣式的實例代碼
1.直接在元素上通過:style的形式，書寫樣式對象
<h1 :style='{color:’red’,’font-weight’:200}'>這是一個H1</h1>
2.將樣式對象定義在data中，并直接引用到:style中
1:在data上定義樣式
data:{ styleObj1:{color:’blue’,’font-weight’:200,’font-size’:’40px’},}
2:在元素中，通過屬性綁定的形式，將樣式對象應用到元素中
<h1 :style='styleObj1'>這是一個H1</h1>
3.在:style中通過數組，引用多個data上的樣式對象
1:在data上定義樣式
data:{ styleObj1:{color:’blue’,’font-weight’:200,’font-size’:’40px’}, styleObj2:{’font-style’:’italic’},}
2:在元素中，通過屬性綁定的形式，將樣式對象應用到元素中
<h1 :style='[styleObj1,styleObj2]'>這是一個H1</h1>
完整代碼:
<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /></head><body> <div id=’app’> <h1 :style='{color:’red’,’font-weight’:200}'>這是一個H1</h1> <h1 :style='styleObj1'>這是一個H1</h1> <h1 :style='[styleObj1,styleObj2]'>這是一個H1</h1> </div></body><script src='http://www.gepszalag.com/bcjs/vue.min.js'></script><script> var vm = new Vue({ el:’#app’, data:{ styleObj1:{color:’blue’,’font-weight’:200,’font-size’:’40px’}, styleObj2:{’font-style’:’italic’}, } });</script></html>
到此這篇關于Vue中通過屬性綁定為元素綁定style行內樣式的文章就介紹到這了,更多相關vue style行內樣式內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. Ajax常用封裝庫——Axios的使用2. jsp網頁實現貪吃蛇小游戲3. jsp+servlet簡單實現上傳文件功能（保存目錄改進）4. CSS Hack大全-教你如何區分出IE6-IE10、FireFox、Chrome、Opera5. 不使用XMLHttpRequest對象實現Ajax效果的方法小結6. 在 Ubuntu Linux 上安裝 Oracle Java 14的方法7. 如何在?ASP.NET?Core?Web?API?中處理?Patch?請求8. Android Studio進行APP圖標更改的兩種方式總結9. pybind11: C++ 工程提供 Python 接口的實例代碼10. PHP終止腳本運行三種實現方法詳解
網公網安備