成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的實例代碼

瀏覽：7日期：2023-01-23 13:06:03

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:在元素中，通過屬性綁定的形式，將樣式對象應(yīng)用到元素中

<h1 :style='styleObj1'>這是一個H1</h1>

3.在:style中通過數(shù)組，引用多個data上的樣式對象

1:在data上定義樣式

data:{ styleObj1:{color:’blue’,’font-weight’:200,’font-size’:’40px’}, styleObj2:{’font-style’:’italic’},}

2:在元素中，通過屬性綁定的形式，將樣式對象應(yīng)用到元素中

<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://m.piao2010.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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！

標簽： Vue
相關(guān)文章：