:class可以理解为外部样式,行内样式则是:style
对象语法
和:class语法不同的是它的键值对是css样式的属性:值
<div :style="{background:'red','font-weight':700,'font-size':'20px'}"></div>
- 引号的使用
属性:属性为单个字符可以不用引号,如果是带连字符如font-weight,就要用引号
值: 除了数字都要加引号
要避免使用引号可以去掉连字符 - 改变动态样式的书写位置
要是加的样式很多时可以将动态样式提取出来,定义在data中:
data:function(){
return {
flexStyle: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'no-wrap',
},
}
}
最后在标签中引入变量即可:
<div :style="flexStyle"></div>
数组语法
:class数组里是类名所以要用"",:style数组里是变量所以不用引号
data() {
return {
fontStyle: { color: 'red', fontSize: '33px' },
boxStyle:{width: '200px', height: '200px', border: `1px solid black`}
};
},
在标签的动态样式中引入:
<div :style="[fontStyle,boxStyle]">这里是文字</div>
案例参考优课达