Article directory
1.Array
<h1 :class="['red','thin']">这是一个H<h1>
2. Use ternary expressions in arrays
<h1 :class="['red','thin'，isactive?'active':'']">这是一个H<h1>
3. Nested objects in arrays
<h1 :class="['red','thin',{'active':isactive}]">这是一个H<h1>
4. Use objects directly
<h1 :class="{red:true,italic:true,active:true,thin:true}">这是一个H<h1>
5. Use inline styles
1. Write the style object directly on the element through the form of :style
<h1 :style="{'red','thin','font-size':'40px'}">这是一个H<h1>
2. Define the style object into data and directly reference it to:style.
Define the style on data:
data:{
h1styleObj:{
color:'red','font-size':'40px','font-weight':'200'}
}
In the element, apply the style object to the element through attribute binding:
<h1:style='h1styleObj'>这是一个h1<.h1>
3. In: style, reference the style objects on multiple data through arrays.
Define the style on data: [With - on the attribute, the '' sign cannot be omitted, such as font-size]
data:{
h1styleObj:{
color:'red','font-size':'40px','font-weight':'200'},
h1styleObj2:{
fontstyle:'italic'}
}
In the element, apply the style object to the element through attribute binding:
<h1 :style="[h1styleObj,h1styleObj2]">这是一个H<h1>