您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了Vue中如何通過屬性綁定為元素綁定style行內樣式,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
1.直接在元素上通過:style的形式,書寫樣式對象
<h2 :>這是一個H1</h2>
2.將樣式對象定義在data中,并直接引用到:style中
1:在data上定義樣式
data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, }
2:在元素中,通過屬性綁定的形式,將樣式對象應用到元素中
<h2 :>這是一個H1</h2>
3.在:style中通過數組,引用多個data上的樣式對象
1:在data上定義樣式
data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, styleObj2:{'font-style':'italic'}, }
2:在元素中,通過屬性綁定的形式,將樣式對象應用到元素中
<h2 :>這是一個H1</h2>
完整代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <h2 :>這是一個H1</h2> <h2 :>這是一個H1</h2> <h2 :>這是一個H1</h2> </div> </body> <script src="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行內樣式的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。