1. Write style objects directly on the element through the form of:style
<h1 :style="{color:'red','font-weight':200}">This is aH1</h1>
2. Define the style object in data and directly reference it to :style
1: Define styles on data
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
}
2: In the element, apply the style object to the element through attribute binding form
<h1 :style="styleObj1">This is aH1</h1>
3. Refer to multiple style objects on data through arrays in:style
1: Define styles on data
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
2: In the element, apply the style object to the element through attribute binding form
<h1 :style="[styleObj1,styleObj2]">This is aH1</h1>
Complete code:
<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}">This is aH1</h1>
<h1 :style="styleObj1">This is aH1</h1>
<h1 :style="[styleObj1,styleObj2]">This is aH1</h1>
</div>
</body>
<script src=""></script>
<script>
var vm = new Vue({
el:'#app',
data:{
styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
styleObj2:{'font-style':'italic'},
}
});
</script>
</html>
This is the article in Vue about binding styles in line through attribute binding to elements. For more related vue styles, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!