溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
