Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的實(shí)例代碼
1.直接在元素上通過:style的形式，書寫樣式對(duì)象
<h1 :style='{color:’red’,’font-weight’:200}'>這是一個(gè)H1</h1>
2.將樣式對(duì)象定義在data中，并直接引用到:style中
1:在data上定義樣式
data:{ styleObj1:{color:’blue’,’font-weight’:200,’font-size’:’40px’},}
2:在元素中，通過屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中
<h1 :style='styleObj1'>這是一個(gè)H1</h1>
3.在:style中通過數(shù)組，引用多個(gè)data上的樣式對(duì)象
1:在data上定義樣式
data:{ styleObj1:{color:’blue’,’font-weight’:200,’font-size’:’40px’}, styleObj2:{’font-style’:’italic’},}
2:在元素中，通過屬性綁定的形式，將樣式對(duì)象應(yīng)用到元素中
<h1 :style='[styleObj1,styleObj2]'>這是一個(gè)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}'>這是一個(gè)H1</h1> <h1 :style='styleObj1'>這是一個(gè)H1</h1> <h1 :style='[styleObj1,styleObj2]'>這是一個(gè)H1</h1> </div></body><script src='http://www.intensediesel.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>
到此這篇關(guān)于Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的文章就介紹到這了,更多相關(guān)vue style行內(nèi)樣式內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）2. .Net反向代理組件Yarp用法詳解3. 解決request.getParameter取值后的if判斷為NULL的問題4. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別5. 詳解JSP 內(nèi)置對(duì)象request常見用法6. JSP中param動(dòng)作的實(shí)例詳解7. ASP.NET MVC實(shí)現(xiàn)下拉框多選8. ASP.NET MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體9. .NET中的MassTransit分布式應(yīng)用框架詳解10. ASP.NET MVC實(shí)現(xiàn)本地化和全球化
網(wǎng)公網(wǎng)安備